垂直居中的幾種實現方法

用過 Fireworks / PhotoShop 的人應該都知道，在畫布中將一個頁面模塊居中是多容易的事，可若是是垂直居中，前端就苦逼了。由於 CSS 自己並無提供相應的 API 支持（確切來講是提供不全）。今天從新整理一下思路，說說前端在實現頁面元素垂直居中的幾種思路：html

1、利用 position 和負邊距

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

/* 代碼實現： * 設定寬度和高度，父節點爲 position:relative; CSS是這樣寫的: */ .selector { position:absolute;top:50%;。 margin-top:-元素自身高度的一半; }

2、使用 `<table />`

<table /> 真是各類好用，她是各類佈局、居中的法寶。垂直居中對其來講，也是很是簡單的事。table cells 的 vertical-align:middle 就能夠直接解決。因此實現起也來只要這樣一行代碼：瀏覽器

td{ vertical-align:middle; }

3、通用解決方案

使用第一方案的問題是，一般咱們須要垂直居中的元素高度都是不確實的。這裏咱們須要用 JS 來實現高度的計算，再實現負邊；而第二種方案的侷限在於只應用於 <table />。實際上是，咱們可能綜合這兩種方法，來作一個 Hack。佈局

像咱們知道的，在 CSS2.1 中，任何元素均可以使用 display:table / display:table-cell來實現與 table 同樣的功能。那麼，只要支持 display:table 的瀏覽器，已經能夠輕鬆解決，只要這樣寫代碼：post

<!-- DOM 結構 --> <div> <p>content</p> </div> /* CSS 實現 */ div { display:table; } p{ display:table-cell; vertical-align:middle; }

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

<div class="wrap"> <div class="hack"> <div class="cnt"> content </div> </div> </div>

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

垂直居中最終方案: DEMOhtm

/* CSS 部分的代碼實現：總體代碼參見上述 demo*/ .wrap{ width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table; *position:relative; } .hack{ display:table-cell;vertical-align:middle; *position:absolute;*top:50%; } .cnt{ *position:relative;*top:-50%; }

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

垂直居中的幾種實現方法