[译]关于垂直居中 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>