|
之前看到很多人一直都問(wèn)這個(gè)問(wèn)題，不過(guò)當(dāng)時(shí)我沒(méi)當(dāng)一回事，因?yàn)樵?CSS 中要垂直居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實(shí)現(xiàn)的方法也不少，不一定要拘泥于和 table 布局一樣。不過(guò)最近有人問(wèn)了幾個(gè)例子，看來(lái)對(duì)此的需求還不少�，F(xiàn)在就把我經(jīng)驗(yàn)?zāi)贸鰜?lái)分享一下，希望大家鼓鼓掌。
首先，要有一個(gè)概念：凡是 table 布局可以實(shí)現(xiàn)的，CSS 一定可以實(shí)現(xiàn)。CSS 可以實(shí)現(xiàn)的，table 未必能做到。
現(xiàn)在來(lái)幾個(gè)例子：
一、單行內(nèi)容的居中
只考慮單行是最簡(jiǎn)單的，無(wú)論是否給容器固定高度，只要給容器設(shè)置 line-height 和 height，并使兩值相等，再加上 over-flow: hidden 就可以了 .middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
優(yōu)點(diǎn)：
1. 同時(shí)支持塊級(jí)和內(nèi)聯(lián)極元素
2. 支持所有瀏覽器
缺點(diǎn)：
1. 只能顯示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相對(duì)高度定義你的 height 和 line-height
2. 不想毀了你的布局的話，overflow: hidden 一定要
為什么？
請(qǐng)比較以下兩個(gè)例子：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
上一個(gè)高度是用的絕對(duì)單位px，并且沒(méi)有隱藏溢出，下一個(gè)高度用的單位是相對(duì)單位em，并且隱藏了溢出。如果你的瀏覽器支持放大字體，那么盡情地放大字體，看看會(huì)出現(xiàn)什么效果。
二、多行內(nèi)容居中，且容器高度可變
也很簡(jiǎn)單，給出一致的 padding-bottom 和 padding-top 就行 .middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
優(yōu)點(diǎn)：
1. 同時(shí)支持塊級(jí)和內(nèi)聯(lián)極元素
2. 支持非文本內(nèi)容
3. 支持所有瀏覽器
缺點(diǎn)：
容器不能固定高度
三、把容器當(dāng)作表格單元
CSS 提供一系列diplay屬性值，包括 display: table, display: table-row, display: table-cell 等，能把元素當(dāng)作表格單元來(lái)顯示。這是再加上 vertical-align: middle, 就和表格中的 valign="center" 一樣了。 .middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持這些屬性，不過(guò)在其他瀏覽器上顯示效果非常完美。
要注意的是：和一個(gè)合法的<td>元素必須在<table>里一樣，display: table-cell 元素必須作為 display: table 的元素的子孫出現(xiàn)。
優(yōu)點(diǎn)：
不用說(shuō)了吧，就是表格，效果和表格一模一樣
缺點(diǎn)：
IE下無(wú)效
四、以毒攻毒！用 IE 的 bug 解決 IE 中的絕對(duì)居中
先不得不說(shuō)一句，IE 真的是個(gè)很爛的瀏覽器，CSS1中的定義都不支持，害得要我們轉(zhuǎn)個(gè)大圈子來(lái)造居中。不過(guò)就像我說(shuō)的，凡是 table 布局可以實(shí)現(xiàn)的，CSS 一定可以實(shí)現(xiàn)，即使在 IE 里也不例外。我研究 IE layout 模式多年，還是找出了一個(gè)可以在 IE 中絕對(duì)居中的方法。這個(gè)方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要問(wèn)我，這是獨(dú)門秘學(xué)，何況三言兩語(yǔ)也講不清楚，只要好用就行 .middle-demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50%;
left: 0;
}
五、整合三和四，寫出支持所有瀏覽器的垂直居中容器！
思路是利用 IE 和 非IE 瀏覽器的 CSS hack, 整合三和四的CSS，寫出兼容主流瀏覽器的垂直居中容器。具體代碼就不給出了，大家權(quán)當(dāng)作練習(xí)練習(xí)。例子可以在下面的附錄中找到。
最終實(shí)測(cè)支持的瀏覽器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上對(duì)合適模型的補(bǔ)正。
推測(cè)支持的瀏覽器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未測(cè)試瀏覽器：Konqueror 最后附上自己寫的，所有居中布局的范例網(wǎng)頁(yè)，大家不明白可以參考。
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
出處：藍(lán)色理想
責(zé)任編輯：yuanshi
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
