不定宽元素的居中方法

Posted 2021-01-10 blackcoding

　　对于定宽元素，一般使用margin: 0 auto能很好实现，

不好实现的办法：

　　1、text-align , line-height 比较常见，但是是针对文本即单排文字，对于容器，盒子，实现不了。

　　2、position:absolute、50%和margin:-px   思路是容器脱离文档，靠负margin拖动自身的一半，达到居中的目的。如果父元素宽度确定方案可行，如果自身宽度不确定无法确定margin值。不大合适，

　　3、position:fixed、0和margin:auto 相对视窗定位，常用于模态框实现。但是使用margin，则要要求元素自身有宽高才能达到自身居中的效果；会脱离文档流

　　4、position:absolute、0和margin:auto  同样要求父级元素具有宽度和高度。不符合

容易实现的办法：

　　方案一：父元素display:tabel,子元素 vertical-align:middle；display:table-cell

　　方案二：子元素定位属性脱离文档流，absolute，父元素非static定位， 子元素通过使用translate属性负的百分比，将自身拉回去一半达到居中。

　　　　position: absolute;
  　　　　top: 50%;
  　　　　left: 50%;
  　　　　transform: translate(-50%, -50%);
　　方案三：vw vh和translate 分别是相对视口的高度（viewport width），视口的高度(viewport height)的1% 50vw表示当前视口宽度的50%。因此可以设置fix定位，然后偏移属性用相对单位来写，tranlate位移一半居中
　　方案四：:before和display:inline-block。原理，居中元素添加一个伪类，并且使其内容为空，高度为100%，表现为inline-block,这样可以设置vertical-align保持垂直居中，对于居中元素自身，采用inline-block与增加
　　　　　　的元素保持一个水平基线，通过vertical-align同时相对middle对齐。由于元素自身展示为行内，可以使用text-align使其水平居中。
　　方案五：flex，兼容性完美的布局方式，使用方式简单。父元素display:flex; 子元素，align-items:center垂直居中，justify-content:center;主轴和侧轴都完成居中，flex很强大。
备注，内容参考唐霜大神的博客https://www.tangshuang.net/3197.html