理解vertical-align或“如何竖向居中”

在各种技术论坛里经常会有这样的问题提出，“我如何能将这个东西竖向居中？”这个问题通常会跟随着这样一句话，“我使用了 vertical-align:middle，但是不管用！ ”

这个问题其实有三个层面的原因

1. HTML布局通常都不是专门针对竖向呈现而设计的。这很自然，一般文字占宽会自动扩展，内容的高度是依据内容的多少和有效宽度而定。很显然，横向宽度和横向布局很容易实现；竖向高度和布局被动跟随横向布局适应。
2. vertical-align:middle没有按预期的设想起作用的原因通常是程序员没有理解其正确的用法，但…
3. … 这又是因为CSS规范(以我的观点)把它给弄拧巴了—依赖vertical-align使用的场合的不同，它实际上会表现出两种完全不同的用法。

Table单元格中的vertical-align

当出现在Table单元格中时，vertical-align的效果会如大多数人的预期一样，它会跟(老的，不鼓励使用)的valign属性的作用一样。在现代浏览器里，下面的这三种写法的效果是一样的：

<td valign="middle"> <!-- 这是一种会逐渐被淘汰的用法 --> </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>

在浏览器中，它们的现实效果是下面这样：

vertical-align在inline元素上效果

然而，当vertical-align被应用的到inline元素上时，它的作用却是类似(老的，不鼓励使用)的valign属性对<img>的作用一样。在现代浏览器里，下面的这三种写法的效果是一样的：

<img align="middle" ...>
<img style="vertical-align:middle" ...>
<span style="display:inline-block; vertical-align:middle"> ... </span>

在浏览器中，它们的现实效果是下面这样：

vertical-align在其它元素上的效果

技术上，某个CSS属性并不是在任何的HTML元素上都是生效。当一个新手将vertical-align属性应用到一个block元素(例如标准的<div>)上时，大多数浏览器会依照继承的原则，将所有它的inline子元素也应用这个属性。

那么，如何将一个元素竖向居中？

如果你在读这篇文章，你很可能对为什么你的写法不好用并不感兴趣。你感兴趣的很可能是如何能让它起作用。

方法一

下面的方法有两个(小)前提。如果你能做到这些前提，那么这个方法适用于你：

• 你需要把想要竖向居中的内容放到一个block元素中，并给这个想要居中的元素指定固定的高度。
• 绝对定位(absolutely-position)这个元素。(通常这样做是没问题的，因为你这个想要居中的元素的父元素仍然可以使用相对位置)。

如果你能接受上面的两个必要条件，那么，方法是这样的：

1. 指定父元素为position:relative 或 position:absolute。
2. 给子元素指定固定的高度。
3. 给子元素设定position:absolute 以及 top:50%，让子元素移动到父元素内部上下居中的位置。
4. 给子元素设定 margin-top:-yy，这里的 yy 的值是你的子元素的高度的一半，弥补居中时的偏差。

下面是CSS代码：

<style type="text/css">
	#myoutercontainer { position:relative }
	#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>

下面是HTML代码：

<div id="myoutercontainer">
	<div id="myinnercontainer">
		<p>Hey look! I'm vertically centered!</p>
		<p>How sweet is this?!</p>
	</div>
</div>

在浏览器中，上面的代码会产生如下的效果：

方法二

这个方法需要你满足下面的前提条件：

• 需要竖向居中的内容只有一行文字。
• 需要对父元素设定固定的高度。

如果你能接受上面的条件，那么，方法是这样：

1. 将父元素的line-height设置为你想要的高度。

下面是CSS代码的写法：

<style type="text/css">
	#myoutercontainer2 { line-height:4em }
</style>

下面是HTML代码的写法：

<p id="myoutercontainer2">
	嗨，我竖向居中了，耶！
</p>

在浏览器中，上面的代码会产生如下的效果：