css html 水平 垂直居中整合版

《css html 水平 垂直居中整合版》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、之前看到很多人一直都問這個(gè)問題，不過當(dāng)時(shí)我沒當(dāng)一回事，因?yàn)樵贑SS中要垂直居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實(shí)現(xiàn)的方法也不少，不一定要拘泥于和table布局一樣。不過最近有人問了幾個(gè)例子，看來對此的需求還不少。現(xiàn)在就把我經(jīng)驗(yàn)?zāi)贸鰜矸窒硪幌?，希望大家鼓鼓掌。首先，要有一個(gè)概念：凡是table布局可以實(shí)現(xiàn)的，CSS一定可以實(shí)現(xiàn)。CSS可以實(shí)現(xiàn)的，table未必能做到。現(xiàn)在來幾個(gè)例子：一、單行內(nèi)容的居中只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設(shè)置lin

2、e-height和height，并使兩值相等，再加上over-flow:hidden就可以了.middle-demo-1{height:4em;line-height:4em;overflow:hidden;}優(yōu)點(diǎn)：1.同時(shí)支持塊級和內(nèi)聯(lián)極元素2.支持所有瀏覽器缺點(diǎn)：1.只能顯示一行2.IE中不支持等的居中要注意的是：1.使用相對高度定義你的height和line-height2.不想毀了你的布局的話，overflow:hidden一定要為什么？請比較以下兩個(gè)例子：[Ctrl+A全部選擇提示：你可

3、先修改部分代碼，再按運(yùn)行]上一個(gè)高度是用的絕對單位px，并且沒有隱藏溢出，下一個(gè)高度用的單位是相對單位em，并且隱藏了溢出。如果你的瀏覽器支持放大字體，那么盡情地放大字體，看看會(huì)出現(xiàn)什么效果。二、多行內(nèi)容居中，且容器高度可變也很簡單，給出一致的padding-bottom和padding-top就行.middle-demo-2{padding-top:24px;padding-bottom:24px;}優(yōu)點(diǎn)：1.同時(shí)支持塊級和內(nèi)聯(lián)極元素2.支持非文本內(nèi)容3.支持所有瀏覽器缺點(diǎn)：容器不能固定高度三、把容器當(dāng)作

4、表格單元CSS提供一系列diplay屬性值，包括display:table,display:table-row,display:table-cell等，能把元素當(dāng)作表格單元來顯示。這是再加上vertical-align:middle,就和表格中的valign="center"一樣了。.middle-demo-3{display:table-cell;height:300px;vertical-align:middle;}可惜IE不支持這些屬性，不過在其他瀏覽器上顯示效果非常完美。要注意的是：和一個(gè)合法的

5、d>元素必須在

6、于IElayout的bug，也可以算以毒攻毒。至于原理，不要問我，這是獨(dú)門秘學(xué)，何況三言兩語也講不清楚，只要好用就行.middle-demo-4{height:300px;position:relative;}.middle-demo-4div{position:absolute;top:50%;left:0;}.middle-demo-4divdiv{position:relative;top:-50%;left:0;}五、整合三和四，寫出支持所有瀏覽器的垂直居中容器！思路是利用IE和非IE瀏覽器的CSS

7、hack,整合三和四的CSS，寫出兼容主流瀏覽器的垂直居中容器。具體代碼就不給出了，大家權(quán)當(dāng)作練習(xí)練習(xí)。例子可以在下面的附錄中找到。最終實(shí)測支持的瀏覽器：IE6+,Mozilla1.7,NetscapeNavigator8,Opera8.0+,Firefox1.0+和Safari1.0+IE5下需要加上對合適模型的補(bǔ)正。推測支持的瀏覽器：Mozilla1.5+,NetscapeNavigator7+,Opera7+未測試瀏覽器：Konqueror最后附上自己寫的，所有居中布局的范例網(wǎng)頁，大家不明白可以參考。

8、[Ctrl+A全部選擇提示：你可先修改部分代碼，再按運(yùn)行]在說到這個(gè)問題的時(shí)候，也許有人會(huì)問CSS中不是有vertical-align屬性來設(shè)置垂直居中的嗎？即使是某些瀏覽器不支持我只需做少許的CSSHack技術(shù)就可以??！所以在這里我還要啰嗦兩句，CSS中的確是有vertical-align屬性，但是它只對(X)HTML元素中擁有valign特性的元素才生效，例如表格元素中的