資源描述：
《網(wǎng)頁制作技巧-css實(shí)現(xiàn)完美垂直居中》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、網(wǎng)頁制作技巧:CSS實(shí)現(xiàn)完美垂直居中>>edu.5151doc.教育資源庫之前看到很多人一直都問這個問題，不過當(dāng)時我沒當(dāng)一回事，因?yàn)樵贑SS中要垂直居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實(shí)現(xiàn)的方法也不少，不一定要拘泥于和table布局一樣。不過最近有人問了幾個例子，看來對此的需求還不少?，F(xiàn)在就把我經(jīng)驗(yàn)?zāi)贸鰜矸窒硪幌?，希望大家鼓鼓掌。首先，要有一個概念：凡是table布局可以實(shí)現(xiàn)的，CSS一定可以實(shí)現(xiàn)。CSS可以實(shí)現(xiàn)的，table未必能做到。現(xiàn)在來幾個例子：一、單行內(nèi)容的居中只考慮單
2、行是最簡單的，無論是否給容器固定高度，只要給容器設(shè)置line-height和height，并使兩值相等，再加上over-floiddle-demo-1{height:4em;line-height:4em;overflog>等的居中要注意的是：1.使用相對高度定義你的height和line-height2.不想毀了你的布局的話，overfloipsumdolorsitamet,consectetueradipiscingelit.</p><br/><br/><pstyle="background:#
3、090;color:#00f;font:bold12px/2emHelvertica,Arial,sans-serif;height:2em;ipsumdolorsitamet,consectetueradipiscingelit.</p>上一個高度是用的絕對單位px，并且沒有隱藏溢出，下一個高度用的單位是相對單位em，并且隱藏了溢出。如果你的瀏覽器支持放大字體，那么盡情地放大字體，看看會出現(xiàn)什么效果。二、多行內(nèi)容居中，且容器高度可變也很簡單，給出一致的padding-bottom和padding-top就行.mid
4、dle-demo-2{padding-top:24px;padding-bottom:24px;}優(yōu)點(diǎn)：1.同時支持塊級和內(nèi)聯(lián)極元素2.支持非文本內(nèi)容3.支持所有瀏覽器缺點(diǎn)：容器不能固定高度三、把容器當(dāng)作表格單元CSS提供一系列diplay屬性值，包括display:table,display:table-roiddle,就和表格中的valign="center"一樣了。.middle-demo-3{display:table-cell;height:300px;vertical-align:middle;}可惜IE不支持
5、這些屬性，不過在其他瀏覽器上顯示效果非常完美。要注意的是：和一個合法的<td>元素必須在<table>里一樣，display:table-cell元素必須作為display:table的元素的子孫出現(xiàn)。優(yōu)點(diǎn)：不用說了吧，就是表格，效果和表格一模一樣缺點(diǎn)：IE下無效四、以毒攻毒！用IE的bug解決IE中的絕對居中先不得不說一句，IE真的是個很爛的瀏覽器，CSS1中的定義都不支持，害得要我們轉(zhuǎn)個大圈子來造居中。不過就像我說的，凡是table布局可以實(shí)現(xiàn)的，CSS一定可以實(shí)現(xiàn)，即使在IE里也不例外。我研究IElayo
6、ut模式多年，還是找出了一個可以在IE中絕對居中的方法。這個方法就是基于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;}五、整合三和四，寫出支持所有瀏覽
7、器的垂直居中容器！思路是利用IE和非IE瀏覽器的CSShack,整合三和四的CSS，寫出兼容主流瀏覽器的垂直居中容器。具體代碼就不給出了，大家權(quán)當(dāng)作練習(xí)練習(xí)。例子可以在下面的附錄中找到。最終實(shí)測支持的瀏覽器：IE6+,Mozilla1.7,NetscapeNavigator12下一頁[這篇文章來自..，]8,Opera8.0+,Firefox1.0+和Safari1.0+IE5下需要加上對合適模型的補(bǔ)正。推測支持的瀏覽器：Mozilla1.5+,NetscapeNavigator7+,Opera7+未測試瀏覽器：Konqu
8、eror最后附上自己寫的，所有居中布局的范例網(wǎng)頁，大家不明白可以參考。上一頁12[這篇文章來自..，]
