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

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

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

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

復(fù)制代碼
代碼如下:

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

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

復(fù)制代碼
代碼如下:

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

但問題是，這種方法在 IE6/7 是不能實(shí)現(xiàn)的，因?yàn)樗麄儾恢С?display:table 這個(gè)特性。那有沒有辦法不計(jì)算高度，利用第一種方案來實(shí)現(xiàn)垂直居中呢？其實(shí)也未嘗不可?？纯聪旅孢@個(gè) DOM 結(jié)構(gòu)和圖示：

復(fù)制代碼
代碼如下:

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

垂直居中

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

復(fù)制代碼
代碼如下:

/* CSS 部分的代碼實(shí)現(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%;
}

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

相關(guān)文章

最新評論