大家好，我是IT修真院成都分院第07期学员，一枚正直善良的web程序员。

一.背景介绍

居中在Html、CSS布局中经常会被使用，

元素的水平居中比较简单，

行级元素设置其父元素 text-align：center，

块级元素设置其本身left、right的margin值为auto即可，

垂直居中则较为麻烦，

以下是我所知道的垂直居中的一些方法。

二.行内元素的垂直居中

1.使用line-height=height

2.使用 + 一个行内元素（如下图）

三.已知高度元素的垂直居中

1.使用绝对定位position：absolute top/bottom：50% + margin:-50%自身高度

2.前面设置一个父元素高度50%的DIV + position：elative：top：-自身高度的一半

四.未知高度元素的垂直居中

1.使用display：table-cell + vertical-align:middle

2.使用绝对定位，top：0 bottom：0 left：0 right：0 + margin:0 auto(如下图)

3.CSS3新属性 transform：ranslat:(-50%,-50%)+绝对定位

五.扩展思考

使用绝对定位，top：0 bottom：0 left：0 right：0 + margin:0 auto 实现居中的原理是什么？

可能是将未知的宽度高度的元素，使其让它的top,bottom,left,right,都与父级的距离为零，如果其元素宽高不够的，就会用margin:auto去填充其大小，从而实现了居中。

还有没有更为简便或适用性更广的垂直居中方法？

使用flex弹性布局：display: flex align-items: center

六.参考资料

http://blog.csdn.net/wolinxuebin/article/details/7615098

http://www.cnblogs.com/yugege/p/5246652.html

http://www.360doc.com/content/11/1011/10/1609343_155094382.shtml