1、img前面插入空标签，左右垂直居中
如果图片比div大，那么图片宽度会缩小到div宽度 ，但是图片比例不会变（也就是不会被拉伸，即使高度小或者大）
<div class="fiexd-box">
<i></i><img src="white.png" alt="">
</div>
.fiexd-box{ /*如果fiexd 浮动，则垂直居中没有效果 */
width: 200px;
height: 200px;
font-size: 0;
display:table-cell;
text-align:center;
vertical-align:middle;
border: 2px solid rebeccapurple;
}
.fiexd-box>img{
max-width: 100%; /*图片适配div，如果需要占满div 可以设置 height:100%(图片要被拉伸) */
}
2、插入一个span标签，写法有点不一样（但是父元素浮动也会居中）
<div class="father-div">
<span class="middle-span"></span>
<img src="white.png" alt="">
</div>
.father-div{
box-sizing: border-box;
width: 200px;
height: 200px;
text-align: center;
border: 1px solid red;
}
.father-div>span{
height: 100%;
display: inline-block;
vertical-align: middle;
}
.father-div>img{
vertical-align: middle;
max-width: 200px;
max-height: 200px;
}
3、图片撑满整个div （图片比div大，或者比div小都会,图片会被拉伸）
<div class="fiexd-box">
<img src="white.png" alt="">
</div>
.fiexd-box{
width: 200px;
height: 200px;
font-size: 0;
position: relative;
border: 2px solid red;
}
.fiexd-box>img{
width: 100%;
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
display:block;
}
