垂直居中的幾種實現方法

用過 fireworks / photoshop 的人應該都知道，在畫布中將乙個頁面模組居中是多容易的事，可如果是垂直居中，前端就苦逼了。因為 css 本身並沒有提供相應的 api 支援（確切來說是提供不全）。今天重新整理一下思路，說說前端在實現頁面元素垂直居中的幾種思路：

利用絕對定位，讓元素的頂部與居中線對齊，再讓元素上移 50% 的高度。這個應該不難理解。原理可以用下圖來做乙個視覺化說明：

/***實現：* 設定寬度和高度，父節點為 position:relative; css是這樣寫的:

*/.selector

真是各種好用，她是各種布局、居中的法寶。垂直居中對其來說，也是非常簡單的事。table cells 的 vertical-align:middle 就可以直接解決。所以實現起也來只要這樣一行**：

td

使用第一方案的問題是，通常我們需要垂直居中的元素高度都是不確實的。這裡我們需要用 js 來實現高度的計算，再實現負邊；而第二種方案的侷限在於只應用於。其實是，我們可能綜合這兩種方法，來做乙個 hack。

像我們知道的，在 css2.1 中，任何元素都可以使用 display:table / display:table-cell來實現與 table 一樣的功能。那麼，只要支援 display:table 的瀏覽器，已經可以輕鬆解決，只要這樣寫**：

content

/* css 實現 */

div

但問題是，這種方法在 ie6/7 是不能實現的，因為他們不支援 display:table 這個特性。那有沒有辦法不計算高度，利用第一種方案來實現垂直居中呢？其實也未嘗不可。看看下面這個 dom 結構和圖示：

content

其實我們只要加多一層。內 .hack 層 top:50%; 再讓 .cnt 層相對自身向上提50%。如上圖所示。這裡有乙個 demo:

垂直居中最終方案: demo

/* css 部分的**實現：整體**參見上述 demo*/

.wrap

.hack

.cnt

這是在支付寶通用解決方案中實現的乙個方案。=_,= 歡迎提供更好的方案…