[译]关于垂直居中 Vertical Align 的探讨

原文出处：Understanding vertical-align, or "How (Not) To Vertically Center Content"

“如何垂直居中某个元素”，以及“vertical-align: middle; 为什么不起作用”，是两个很常见的问题，究其原因，要分为下面三点来讲述：

1. HTML 的布局本是为水平方向的排版来设计的，内容都是根据指定的宽度以及该宽度下所对应的高度（设置了高宽比）来显示的。所以，水平方向上的尺寸调整和布局轻而易举，而垂直方向上的则要以水平方向为准。

2. vertical-align: middle; 之所以不起作用，是因为使用者并没有真正理解它，但是……

3. 使用者之所以没有理解这个属性，是因为 CSS 定义就把这事儿弄砸了——在不同的应用环境中，它会表现出两种不同的结果。

---

应用于表格单元格的 vertical-align

这个属性应用于表格单元格时，通常都能得到我们想要的结果，该属性模拟的是已经弃用的旧属性 valign。在支持新标准的现代浏览器中，下面三行语句实现的效果是一样的：

<td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
<td style="vertical-align: middle"> ... </td>
<div style="display: table-cell; vertical-align: middle"> ... </div>

应用于行内元素的 vertical-align

当这个属性应用于行内元素时，它的表现形式与已经弃用的、应用于 <img> 元素的旧属性 align 相同。在支持新标准的现代浏览器中，下面三行语句实现的效果是一样的：

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

应用于其它元素的 vertical-align

从技术上来讲，其它元素没有该属性。当新手给普通的块状元素（比如 <div>）分配该属性时，大部分浏览器会给这个块状元素的所有行内子元素设置该属性的值为 inherit。

---

如何使元素垂直居中？

方法一

要实现垂直居中，需要满足两个前提条件：

1. 要设置垂直居中元素的高度，并且为其再添加一个父级块元素（也需设置高度，这点原文未作说明）。

2. 对内容块设置绝对定位不会出现问题。（一般来说都没什么问题，因为父级的块元素还是处在正常的文档流中的。）

如果能够满足以上两点，那么可以通过以下几步设置来实现元素的垂直居中：

1. 设置父容器的属性为 position: relative or position: absolute。

2. 为垂直居中的子元素设置一个固定的宽度。

3. 为子元素设置属性 position:absolute 和 top:50%，令子元素的顶部在纵向上与父元素中间的位置对齐。

4. 为子元素设置属性 margin-top:-yy，其中 yy 为子元素高度值的一半，相当于再将子元素向上移动其本身高度的一半距离，这样就可以令其垂直居中了。

下面是示例代码：

<style type="text/css">
  #myoutercontainer { position: relative; }
  #myinnercontainer { position: absolute; top: 50%; height: 10em; margin-top: -5em; }
</style>
...
<div id="myoutercontainer">
  <div id="myinnercontainer">
    <p>Hey look! I'm vertically centered!</p>
    <p>How sweet is this?!</p>
  </div>
</div>

方法二

这个方法也需要满足两个前提条件：

1. 要被居中的文本只有一行。

2. 可以为（文本所属的）父元素（如 <p>）设置定宽。

满足上面的前提条件之后，只需再加一步即可实现垂直居中：

1. 为父元素设置合理的宽度。

下面是示例代码：

<style type="text/css">
  #myoutercontainer2 { line-height: 4em; }
</style>
...
<p id="myoutercontainer2">
  Hey, this is vertically centered. Yay!
</p>