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

一、利用 position 和負邊距

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

?

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

?二、使用?<table />

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

td{ vertical-align:middle; }

三、通用解決方案

使用第一方案的問題是，通常我們需要垂直居中的元素高度都是不確實的。這里我們需要用 JS 來實現高度的計算，再實現負邊；而第二種方案的局限在于只應用于?<table />。其實是，我們可能綜合這兩種方法，來做一個 Hack。

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

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

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

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

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

垂直居中最終方案: DEMO

/* 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%; }

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

轉：http://sofish.de/1909

轉載于:https://www.cnblogs.com/liubingna/p/3448583.html

總結

以上是生活随笔為你收集整理的垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。