CSS 實(shí)現(xiàn)未知內(nèi)容高度的垂直水平居中(改良版)
發(fā)布時(shí)間：2009-06-05 22:59:57 作者：佚名 
我要評(píng)論
我要評(píng)論垂直居中在IE瀏覽器下的實(shí)現(xiàn)比較難實(shí)現(xiàn)，而更難實(shí)現(xiàn)的應(yīng)該是未知內(nèi)容高度的垂直水平居中！還好網(wǎng)上也有很多高人發(fā)布了一些解決的方法！這里我進(jìn)行了一些改良，兼容FF，IE6，IE7，Opera...如發(fā)現(xiàn)問題有勞回復(fù)評(píng)論！
[code]
<mce:style><!--
*{margin:0;padding:0;b
垂直居中在IE瀏覽器下的實(shí)現(xiàn)比較難實(shí)現(xiàn)，而更難實(shí)現(xiàn)的應(yīng)該是未知內(nèi)容高度的垂直水平居中！還好網(wǎng)上也有很多高人發(fā)布了一些解決的方法！這里我進(jìn)行了一些改良，兼容FF，IE6，IE7，Opera...如發(fā)現(xiàn)問題有勞回復(fù)評(píng)論！
<mce:style><!--
*{margin:0;padding:0;border:none;font:12px Verdana,"宋體";}
#outer{height:400px;width:400px;display:table;background-color:#08f;overflow:hidden;*position:relative;}
#middle{width:100%;display:table-cell;vertical-align:middle;*position:absolute;*top:50%;}
#inner{*position:relative;*top:-50%;text-align:center; background:#F00;}
#inner img{vertical-align:middle;*position:relative;*top:-1px;}
--></mce:style><style mce_bogus="1">*{margin:0;padding:0;border:none;font:12px Verdana,"宋體";}
#outer{height:400px;width:400px;display:table;background-color:#08f;overflow:hidden;*position:relative;}
#middle{width:100%;display:table-cell;vertical-align:middle;*position:absolute;*top:50%;}
#inner{*position:relative;*top:-50%;text-align:center; background:#F00;}
#inner img{vertical-align:middle;*position:relative;*top:-1px;}</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<!--可以放任何文本標(biāo)簽<p/>等或者圖片標(biāo)簽<img/>-->
</div>
</div>
</div>
</body>
復(fù)制代碼
代碼如下:<mce:style><!--
*{margin:0;padding:0;border:none;font:12px Verdana,"宋體";}
#outer{height:400px;width:400px;display:table;background-color:#08f;overflow:hidden;*position:relative;}
#middle{width:100%;display:table-cell;vertical-align:middle;*position:absolute;*top:50%;}
#inner{*position:relative;*top:-50%;text-align:center; background:#F00;}
#inner img{vertical-align:middle;*position:relative;*top:-1px;}
--></mce:style><style mce_bogus="1">*{margin:0;padding:0;border:none;font:12px Verdana,"宋體";}
#outer{height:400px;width:400px;display:table;background-color:#08f;overflow:hidden;*position:relative;}
#middle{width:100%;display:table-cell;vertical-align:middle;*position:absolute;*top:50%;}
#inner{*position:relative;*top:-50%;text-align:center; background:#F00;}
#inner img{vertical-align:middle;*position:relative;*top:-1px;}</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<!--可以放任何文本標(biāo)簽<p/>等或者圖片標(biāo)簽<img/>-->
</div>
</div>
</div>
</body>
相關(guān)文章
- 本文給大家分享CSS 垂直水平居中的5種最佳解決方案以及各自的優(yōu)缺點(diǎn)，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-01-11
- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
純css多種方法實(shí)現(xiàn)div中單行文字、多行文字及嵌套div垂直水平居中
經(jīng)常遇到要居中的問題，水平居中問題比較好解決，而垂直居中問題因?yàn)関ertical-align經(jīng)常失效，下面與大家分享下幾個(gè)不錯(cuò)的解決方法2014-04-24大小不固定的圖片和多行文字的垂直水平居中實(shí)現(xiàn)分析
其核心原理其實(shí)與第二種利用font-size大小實(shí)現(xiàn)IE下圖片垂直居中是一致的。將font-size設(shè)置得很大，目的是撐開IE下默認(rèn)文字空間的高度，其性質(zhì)類似于空格，然后通過(guò)vertical2012-12-07- 很多人都會(huì)遇到這樣的問題：如何使DIV居中,div垂直居中,div水平居中.2010-02-23
- 今天有人問起，晚上試著寫出來(lái)，供參考； 以下代碼兼容主流瀏覽器IE6、IE7、Firefox、Opera。 從最簡(jiǎn)單的開始………… 一、如何讓一個(gè)DIV水平居2009-04-04
- 這篇文章主要介紹了CSS水平垂直居中解決方案(6種)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-10