CSS實現完美垂直居中

以前看到不少人一直都問這個問題，不過當時我沒當一回事，由於在 CSS 中要垂直居中，多數是在有高度的狀況下，或者容器高度不定的狀況下才用，看上去比較舒服，並且實現的方法也很多，不必定要拘泥於和 table 佈局同樣。不過最近有人問了幾個例子，看來對此的需求還很多。如今就把我經驗拿出來分享一下，但願你們鼓鼓掌。

首先，要有一個概念：凡是 table 佈局能夠實現的，CSS 必定能夠實現。CSS 能夠實現的，table 未必能作到。

如今來幾個例子：

1、單行內容的居中
只考慮單行是最簡單的，不管是否給容器固定高度，只要給容器設置 line-height 和 height，並使兩值相等，再加上 over-flow: hidden 就能夠了

.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}

優勢：
1. 同時支持塊級和內聯極元素
2. 支持全部瀏覽器
缺點：
1. 只能顯示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相對高度定義你的 height 和 line-height
2. 不想毀了你的佈局的話，overflow: hidden 必定要
爲何？
請比較如下兩個例子：

 [Ctrl+A 所有選擇 提示：你可先修改部分代碼，再按運行]

上一個高度是用的絕對單位px，而且沒有隱藏溢出，下一個高度用的單位是相對單位em，而且隱藏了溢出。若是你的瀏覽器支持放大字體，那麼盡情地放大字體，看看會出現什麼效果。

2、多行內容居中，且容器高度可變
也很簡單，給出一致的 padding-bottom 和 padding-top 就行

.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}

優勢：
1. 同時支持塊級和內聯極元素
2. 支持非文本內容
3. 支持全部瀏覽器
缺點：
容器不能固定高度

3、把容器看成表格單元
CSS 提供一系列diplay屬性值，包括 display: table, display: table-row, display: table-cell 等，能把元素看成表格單元來顯示。這是再加上 vertical-align: middle, 就和表格中的 valign="center" 同樣了。

.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}

惋惜IE不支持這些屬性，不過在其餘瀏覽器上顯示效果很是完美。
要注意的是：和一個合法的<td>元素必須在<table>裏同樣，display: table-cell 元素必須做爲 display: table 的元素的子孫出現。

優勢：
不用說了吧，就是表格，效果和表格如出一轍
缺點：
IE下無效

4、以毒攻毒！用 IE 的 bug 解決 IE 中的絕對居中
先不得不說一句，IE 真的是個很爛的瀏覽器，CSS1中的定義都不支持，害得要咱們轉個大圈子來造居中。不過就像我說的，凡是 table 佈局能夠實現的，CSS 必定能夠實現，即便在 IE 裏也不例外。我研究 IE layout 模式多年，仍是找出了一個能夠在 IE 中絕對居中的方法。這個方法就是基於 IE layout 的 bug，也能夠算以毒攻毒。至於原理，不要問我，這是獨門祕學，況且三言兩語也講不清楚，只要好用就行

.middle-demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50%;
left: 0;
}

5、整合三和四，寫出支持全部瀏覽器的垂直居中容器！
思路是利用 IE 和 非IE 瀏覽器的 CSS hack, 整合三和四的CSS，寫出兼容主流瀏覽器的垂直居中容器。具體代碼就不給出了，你們權看成練習練習。例子能夠在下面的附錄中找到。
最終實測支持的瀏覽器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下須要加上對合適模型的補正。
推測支持的瀏覽器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未測試瀏覽器：Konqueror

最後附上本身寫的，全部居中佈局的範例網頁，你們不明白能夠參考。