纯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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容