一个简单的例子：

　　<div style="vertical-align: middle; height: 100px;">
　　  <span>hello world!</span>
　　</div>可以看到”hello world!”并没有垂直居中。网上有很多人从很多不同地方面进行分析，其实简单概括就一句话：vertical-align的作用范围仅限display: table-cell或display: inline-block元素。
　　那么如何实现垂直居中呢？
　　最简单的方法，当父容器的高已知时，可以简单地设定要局中的元素的line-height为父容器的高度即可实现垂直局中。如：

　　<div style="vertical-align: middle; height: 100px;">
　　  <span style="line-height: 100px;">hello world!</span>
　　</div>第二个方法，当父容器高度未知，子元素高度已知时，可以依次这样做：
　　设置父容器position:relative或position:absolute.
　　设置子元素position:absolute且top:50%.
　　设置子元素margin-top: -子元素高度的二分之一.

文章评级：★★★★★☆☆☆☆ 发表者：{izhishi}izhishi 4-26 [ 0]