- 1.在一个div内让img水平垂直居中显示,无论img是什么形状大小。
.img_box{width:3.2rem; height:3.2rem;line-height: 3.2rem; text-align: center; margin:0 auto;}
.img_box img{max-width:100%;max-height: 100%;vertical-align: middle;}
- 2.banner图随着页面宽度缩小依然水平居中显示
思路:给img外框的div设置固定的width,样式居中显示。然后img设置最大的width和height,
margin-left:-(img.width-div.width)/2
<div class="banner-bg">
<img src="" alt="" class="banner" />
</div>
//css
.banner-bg{position:relative;width:1200px;margin:0 auto;text-align: center;}
img.banner{width: 1920px;height: 370px;margin-left: -360px;}