实现 vertical-align 的几种办法

请甄别文章的时效性。

这篇文章最后更新于 11 年前 ，其中所记录的信息可能已经不再合理或有效。如有任何建议，欢迎与我联系。

一个简单的例子：

<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: -子元素高度的二分之一.

喜欢简单的方式？

喜欢简单的人们可以使用下面的 javascript 代码(需要 jQuery)，原理是在要垂直局中的元素外包一层:

$(function () {
  $(".vertical-align-middle").wrapInner(
    '<table height="100%" width="100%">\
       <tr><td style="vertical-align: middle;"></td></tr>\
     </table>'
  );
});

注: 将要垂直居中的容器 class 设成vertical-align-middle即可，如前一例：

<div class="vertical-align-middle" style="height: 100px;">
  <span>hello world!</span>
</div>

enjoy it!