img图片水平和垂直同时居中

image.png

• 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;}