CSS 實現未知內容高度的垂直水平居中(改良版)

2024-07-11 08:39:46

字體：大中小

來源：轉載

供稿：網友

垂直居中在IE瀏覽器下的實現比較難實現，而更難實現的應該是未知內容高度的垂直水平居中！還好網上也有很多高人發布了一些解決的方法！這里我進行了一些改良，兼容FF，IE6，IE7，Opera…如發現問題有勞回復評論！

復制代碼代碼如下:
<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”>
<!–可以放任何文本標簽<p/>等或者圖片標簽<img/>–>
</div>
</div>
</div>
</body>