純CSS實現未知尺寸的圖片在容器中水平和垂直居中

使用純CSS實現未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中

CSS

.box {        
/*非IE的主流瀏覽器識別的垂直居中的方法*/        
display: table-cell;        
vertical-align:middle;        
/*設置水平居中*/        
text-align:center;        
/* 針對IE的Hack */        
*display: block;        
*font-size: 175px;/*約為高度的0.873，200*0.873 約為175*/        
*font-family:Arial;
/*防止非utf-8引起的hack失效問題，如gbk編碼*/        
width:200px;        
height:200px;        
border: 1px solid #eee;
}
.box img {      
  /*設置圖片垂直居中*/      
  vertical-align:middle;
}

HTML

<div class="box">  
  <img src='test.png'>  
</div>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容