CSS 解決未知高度垂直居中實現(xiàn)代碼
發(fā)布時間：2010-06-06 21:10:22 作者：佚名 
我要評論
我要評論盡管有CSS的vertical-align特性，但是并不能有效解決未知高度的垂直居中問題（在一個DIV標(biāo)簽里有未知高度的文本或圖片的情況下）。
標(biāo)準(zhǔn)瀏覽器如Mozilla, Opera, Safari等.，可將父級元素顯示方式設(shè)定為TABLE(display: table;) ，內(nèi)部子元素定為table-cell (display: table-cell),通過vertical-align特性使其垂直居中，但非標(biāo)準(zhǔn)瀏覽器是不支持的。
非標(biāo)準(zhǔn)瀏覽器只能在子元素里設(shè)距頂部50%，里面再套個元素距頂部-50% 來抵消。
CSS
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}
xhtml
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
</div>
</div>
</div>
以上CSS代碼的優(yōu)點是沒有hacks，采用了IE不支持的CSS2選擇器#value[id]。
CSS2選擇器#value[id]相當(dāng)于選擇器#value，但是Internet Explorer不支持這種類型的選擇器。同樣地.value[class]，相當(dāng)于.value,這些只有標(biāo)準(zhǔn)瀏覽器能讀懂。
測試：Firefox1.5、Opera9.0、IE6.0、IE5.0通過。
提示：您可以先修改部分代碼再運行
非標(biāo)準(zhǔn)瀏覽器只能在子元素里設(shè)距頂部50%，里面再套個元素距頂部-50% 來抵消。
CSS
復(fù)制代碼
代碼如下:body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}
xhtml
復(fù)制代碼
代碼如下:<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
</div>
</div>
</div>
以上CSS代碼的優(yōu)點是沒有hacks，采用了IE不支持的CSS2選擇器#value[id]。
CSS2選擇器#value[id]相當(dāng)于選擇器#value，但是Internet Explorer不支持這種類型的選擇器。同樣地.value[class]，相當(dāng)于.value,這些只有標(biāo)準(zhǔn)瀏覽器能讀懂。
測試：Firefox1.5、Opera9.0、IE6.0、IE5.0通過。
提示：您可以先修改部分代碼再運行
相關(guān)文章
純CSS定位的固定垂直居中浮動層代碼，附經(jīng)典解說 《詳解定位與定位應(yīng)用
關(guān)于在html中浮動層是眾多網(wǎng)頁愛好者剛開始的難點，主要在于定位。如果你對CSS定位還不夠了解 可以接著往下看，運行里面的內(nèi)容即可。 【需求】： 將一個網(wǎng)頁分成頭、身2009-07-01- 如題，用html，css如何實現(xiàn)垂直居中。水平居中我們知道最簡便的方法就是margin:auto，但是margin只是相對寬度有效。2010-03-18
用CSS讓img input select button 圖片,文本框,下拉菜單,按扭垂直居中的
一直以來,在HTML中,img input select button 這里元素，垂直對齊,比較難。結(jié)果我長大了。我發(fā)現(xiàn)了一個現(xiàn)像，其實解決這些問題只是一句話的事。2011-03-08CSS垂直居中網(wǎng)頁布局實現(xiàn)的5種方法
網(wǎng)頁制作Webjx文章簡介：利用 CSS 來實現(xiàn)對象的垂直居中有許多不同的方法，比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎么來創(chuàng)建一個好的居中網(wǎng)站。2009-04-02- 用過 Fireworks / PhotoShop 的人應(yīng)該都知道，在畫布中將一個頁面模塊居中是多容易的事，可如果是垂直居中，前端就苦逼了2011-10-30
- 全屏垂直居中的一個辦法 DIV+CSS , 這個方面有一點不好， 就是不能自動適應(yīng)，必須把高和寬寫死！2011-10-07
- 寬度自適應(yīng)：就是元素的寬度根居里面的內(nèi)容來變化2012-06-14
- 圖片的寬度和高度是未知的，沒有一個固定的尺寸，在這個前提下要使圖片在一個固定了寬度和高度的容器中垂直居中，想想感覺還是挺麻煩的，由于最近的項目可能會用到這個方案2010-12-18
- 最近上網(wǎng)上找了些關(guān)于CSS實現(xiàn)垂直居中的方法，方法挺多，下面就我看到的幾種好方法在這里說明一下，使用 CSS 實現(xiàn)垂直居中并不容易。2011-09-05
- 看到問此問題的很多，所以花點時間整理下，歡迎大家提意見，做補充修改，謝謝2012-01-21