css 垂直居中的幾種實(shí)現(xiàn)方法
發(fā)布時(shí)間：2011-10-30 11:22:29 作者：佚名 
我要評(píng)論
我要評(píng)論用過(guò) Fireworks / PhotoShop 的人應(yīng)該都知道，在畫布中將一個(gè)頁(yè)面模塊居中是多容易的事，可如果是垂直居中，前端就苦逼了
因?yàn)?CSS 本身并沒有提供相應(yīng)的 API 支持（確切來(lái)說(shuō)是提供不全）。今天重新整理一下思路，說(shuō)說(shuō)前端在實(shí)現(xiàn)頁(yè)面元素垂直居中的幾種思路：
一、利用 position 和負(fù)邊距
利用絕對(duì)定位，讓元素的頂部與居中線對(duì)齊，再讓元素上移 50% 的高度。這個(gè)應(yīng)該不難理解。原理可以用下圖來(lái)做一個(gè)可視化說(shuō)明：
/* 代碼實(shí)現(xiàn)：
* 設(shè)定寬度和高度，父節(jié)點(diǎn)為 position:relative; CSS是這樣寫的:
*/
.selector {
position:absolute;top:50%;。
margin-top:-元素自身高度的一半;
}
二、使用 <table />
<table /> 真是各種好用，她是各種布局、居中的法寶。垂直居中對(duì)其來(lái)說(shuō)，也是非常簡(jiǎn)單的事。table cells 的 vertical-align:middle 就可以直接解決。所以實(shí)現(xiàn)起也來(lái)只要這樣一行代碼：
td{ vertical-align:middle; }三、通用解決方案
使用第一方案的問(wèn)題是，通常我們需要垂直居中的元素高度都是不確實(shí)的。這里我們需要用 JS 來(lái)實(shí)現(xiàn)高度的計(jì)算，再實(shí)現(xiàn)負(fù)邊；而第二種方案的局限在于只應(yīng)用于 <table />。其實(shí)是，我們可能綜合這兩種方法，來(lái)做一個(gè) Hack。
像我們知道的，在 CSS2.1 中，任何元素都可以使用 display:table / display:table-cell來(lái)實(shí)現(xiàn)與 table 一樣的功能。那么，只要支持 display:table 的瀏覽器，已經(jīng)可以輕松解決，只要這樣寫代碼：
<!-- DOM 結(jié)構(gòu) -->
<div>
<p>content</p>
</div>
/* CSS 實(shí)現(xiàn) */
div { display:table; }
p{ display:table-cell; vertical-align:middle; }
但問(wèn)題是，這種方法在 IE6/7 是不能實(shí)現(xiàn)的，因?yàn)樗麄儾恢С?display:table 這個(gè)特性。那有沒有辦法不計(jì)算高度，利用第一種方案來(lái)實(shí)現(xiàn)垂直居中呢？其實(shí)也未嘗不可?？纯聪旅孢@個(gè) DOM 結(jié)構(gòu)和圖示：
<div class="wrap">
<div class="hack">
<div class="cnt">
content
</div>
</div>
</div>
垂直居中最終方案: DEMO http://demo.jb51.net/js/2011/align-middle/
/* 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è)方案。=_,= 歡迎提供更好的方案…
一、利用 position 和負(fù)邊距
利用絕對(duì)定位，讓元素的頂部與居中線對(duì)齊，再讓元素上移 50% 的高度。這個(gè)應(yīng)該不難理解。原理可以用下圖來(lái)做一個(gè)可視化說(shuō)明：
復(fù)制代碼
代碼如下:/* 代碼實(shí)現(xiàn)：
* 設(shè)定寬度和高度，父節(jié)點(diǎn)為 position:relative; CSS是這樣寫的:
*/
.selector {
position:absolute;top:50%;。
margin-top:-元素自身高度的一半;
}
二、使用 <table />
<table /> 真是各種好用，她是各種布局、居中的法寶。垂直居中對(duì)其來(lái)說(shuō)，也是非常簡(jiǎn)單的事。table cells 的 vertical-align:middle 就可以直接解決。所以實(shí)現(xiàn)起也來(lái)只要這樣一行代碼：
td{ vertical-align:middle; }三、通用解決方案
使用第一方案的問(wèn)題是，通常我們需要垂直居中的元素高度都是不確實(shí)的。這里我們需要用 JS 來(lái)實(shí)現(xiàn)高度的計(jì)算，再實(shí)現(xiàn)負(fù)邊；而第二種方案的局限在于只應(yīng)用于 <table />。其實(shí)是，我們可能綜合這兩種方法，來(lái)做一個(gè) Hack。
像我們知道的，在 CSS2.1 中，任何元素都可以使用 display:table / display:table-cell來(lái)實(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; }
但問(wèn)題是，這種方法在 IE6/7 是不能實(shí)現(xiàn)的，因?yàn)樗麄儾恢С?display:table 這個(gè)特性。那有沒有辦法不計(jì)算高度，利用第一種方案來(lái)實(shí)現(xiàn)垂直居中呢？其實(shí)也未嘗不可?？纯聪旅孢@個(gè) DOM 結(jié)構(gòu)和圖示：
復(fù)制代碼
代碼如下:<div class="wrap">
<div class="hack">
<div class="cnt">
content
</div>
</div>
</div>
垂直居中最終方案: 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)文章
- 如題，用html，css如何實(shí)現(xiàn)垂直居中。水平居中我們知道最簡(jiǎn)便的方法就是margin:auto，但是margin只是相對(duì)寬度有效。2010-03-18
CSS解決未知高度的垂直水平居中自適應(yīng)問(wèn)題
今天有人問(wèn)起，晚上試著寫出來(lái)，供參考； 以下代碼兼容主流瀏覽器IE6、IE7、Firefox、Opera。 從最簡(jiǎn)單的開始………… 一、如何讓一個(gè)DIV水平居2009-04-04CSS讓圖片垂直居中和底端對(duì)齊的代碼-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
本CSS教程提供了兩種對(duì)齊方式即垂直居中對(duì)齊和底端對(duì)齊！更多內(nèi)容請(qǐng)參考本站的CSS視頻教程。 CSS使圖片垂直居中的代碼： <!DOCTYPE html PUBLIC "-//W3C//DT2008-10-17- css實(shí)現(xiàn)的頁(yè)面元素屏幕垂直居中的方法，需要的朋友可以參考下。2010-07-20
CSS解決文字與圖片不能水平居中對(duì)齊的問(wèn)題
在文字旁邊加上一個(gè)圖標(biāo)，通過(guò)css如何解決文字與圖片不能水平居中對(duì)齊的問(wèn)題，下面有個(gè)示例，大家可以參考下2014-05-31- 這篇文章主要介紹了通過(guò)CSS設(shè)置未知大小圖片在已知大小容器水平垂直居中，需要的朋友可以參考下2014-05-22
- 本文給大家?guī)?lái)的是5種使用CSS實(shí)現(xiàn)垂直居中的方法，雖然各有優(yōu)缺點(diǎn)，但還都是蠻實(shí)用的，小伙伴們根據(jù)自己的項(xiàng)目情況，自由選擇吧。2015-01-09
css中position:fixed實(shí)現(xiàn)div在窗口上下左右居中
實(shí)現(xiàn)div居中的方法有很多，本例介紹的使用css中position:fixed來(lái)實(shí)現(xiàn)div的上下左右居中，下面以一個(gè)DIV 元素在瀏覽器窗口居中為例2014-10-20css中position:fixed實(shí)現(xiàn)div居中上下左右居中
實(shí)現(xiàn)div居中的方法多如牛毛，本例為大家介紹的這個(gè)方法是使用css中position:fixed來(lái)實(shí)現(xiàn)div上下左右居中，這個(gè)小技巧比較使用，大家看看2014-10-14DIV+CSS中讓布局、背景圖片、文字內(nèi)容居中的方法
這篇文章主要為大家介紹了在DIV+CSS布局的頁(yè)面里，讓布局、背景圖片、文字內(nèi)容居中的方法，從布局內(nèi)容到頁(yè)面里文章文字居中都是非常重要的，而css來(lái)設(shè)置居中也是非常簡(jiǎn)單的2014-10-09