欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css 垂直居中的幾種實現(xiàn)方法

  發(fā)布時間：2011-10-30 11:22:29   作者：佚名   我要評論
用過 Fireworks / PhotoShop 的人應該都知道，在畫布中將一個頁面模塊居中是多容易的事，可如果是垂直居中，前端就苦逼了
因為 CSS 本身并沒有提供相應的 API 支持（確切來說是提供不全）。今天重新整理一下思路，說說前端在實現(xiàn)頁面元素垂直居中的幾種思路：

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

復制代碼
代碼如下:

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

二、使用 <table />
<table /> 真是各種好用，她是各種布局、居中的法寶。垂直居中對其來說，也是非常簡單的事。table cells 的 vertical-align:middle 就可以直接解決。所以實現(xiàn)起也來只要這樣一行代碼：
td{ vertical-align:middle; }三、通用解決方案
使用第一方案的問題是，通常我們需要垂直居中的元素高度都是不確實的。這里我們需要用 JS 來實現(xiàn)高度的計算，再實現(xiàn)負邊；而第二種方案的局限在于只應用于 <table />。其實是，我們可能綜合這兩種方法，來做一個 Hack。
像我們知道的，在 CSS2.1 中，任何元素都可以使用 display:table / display:table-cell來實現(xiàn)與 table 一樣的功能。那么，只要支持 display:table 的瀏覽器，已經(jīng)可以輕松解決，只要這樣寫代碼：

復制代碼
代碼如下:

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

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

復制代碼
代碼如下:

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

垂直居中

其實我們只要加多一層。內(nèi) .hack 層 top:50%; 再讓 .cnt 層相對自身向上提50%。如上圖所示。這里有一個 DEMO:
垂直居中最終方案: DEMO http://demo.jb51.net/js/2011/align-middle/

復制代碼
代碼如下:

/* CSS 部分的代碼實現(xiàn)：整體代碼參見上述 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%;
}

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

相關文章

最新評論