CSS 垂直居中

Posted by luoway on October 25, 2015
line-height
 
vertical-align
table cell
table cell
table cell
absolute margin:(half)
absolute margin:auto
blank
child

注:父元素背景为灰色,子元素背景为红色

方法1.line-height:通过设置行高 = 父元素高度,单行垂直居中。

方法2.vertical-align:基线对齐,适用于inline-block元素。需以邻近行内元素作为基准。

方法3. display: table:此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
display: table-cell:此元素会作为一个表格单元格显示(类似 <td><th>
结合vertical-align: middle垂直居中。

方法4.适用于已知宽高的块状元素。

position: absolute;
top:50%;
left:50%;
margin-top: -(half height);
margin-left: -(half width);   

方法5.不适用于IE7以下,未知宽高的块状元素的水平垂直居中。

position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;

方法6.手动居中。适用于子元素为已知宽高的块状元素。
先使用div占据父元素一半空间,设置负边距为居中子元素的一半。

小结

相比于CSS水平居中的两种规范的常用方法:行内元素text-align:center、块状元素margin:0 auto
CSS垂直居中没有“相对于父元素垂直居中”这样的属性,并且,可能出于网页在高度方向的自动延展的原因,margin:auto 0这样的写法无效。

于是,使用CSS实现元素垂直居中需要因地制宜,它比实现水平居中更加灵活多变。