[譯]關於垂直居中 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>