css实现垂直居中的几种方法

未知宽高元素的垂直水平居中

1：组合使用display：table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display：inline-block即可）这在子元素不确定宽度和高度时，特别适用

与其他一些display属性类似，table-cell同样会被其他一些css属性破坏，例如float，position：absolute，所以在使用display：table-cell时，尽量不要使用float或者position:absolute（可以考虑为之增加一个父div定义float等属性。）；设置了table-cell的元素对宽度和高度敏感（在父元素上设置table-row等属性，也会使其不感知height。），对margin值无反应，响应padding属性

 

2：display：flex-box

Flexbox(伸缩盒)是CSS3中新增的特性，利用这个属性可以解决页面中的居中问题。只需要3行代码就可以实现，不需要设置元素的尺寸，能够自适应页面。

这个方法只能在现代浏览器上有效，IE10+、chrome、Safari、Firefox。

1.设置container的display的类型为flex，激活为flexbox模式。

2.justify-content定义水平方向的元素位置

3.align-items定义垂直方向的元素位置

 

3：绝对定位+transform反向偏移。position:absolute; transform:translate(-50%,-50%); //  transform:translateY(-50%)+text-align:center;

原理很简单：由于top、left偏移了父对象的50%宽度高度，所以需要利用transform反向偏移居中块的50%宽高

已知宽度和高度的水平垂直居中

4：绝对定位+margin：auto（position:absolute; left:0; top:0; right:0; bottom:0; margin:auto）//全都要写，缺一不可