純CSS實(shí)現(xiàn)未知尺寸的圖片水平和垂直居中
.box {
??????? /*非IE的主流瀏覽器識(shí)別的垂直居中的方法*/
??????? display: table-cell;
??????? vertical-align:middle;

??????? /*設(shè)置水平居中*/
??????? text-align:center;

??????? /* 針對(duì)IE的Hack */
??????? *display: block;
??????? *font-size:262px; /*約為高度的0.873，300*0.873 約為262*/
??????? *font-family:Arial; /*防止非utf-8引起的hack失效問(wèn)題，如gbk編碼*/

??????? width:400px;
??????? height:300px;
??????? border:1px solid #eee;
}
.box img {
??????? /*設(shè)置圖片垂直居中*/
??????? vertical-align:middle;
}

<div class=”box”>
??????? <img src=”http://www.www.hello-code.com/rainweb-blue.png“/>
</div>

總結(jié)

以上是生活随笔為你收集整理的css未知尺寸的图片的水平和垂直居中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。