1、img前面插入空標(biāo)簽，左右垂直居中

如果圖片比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  可以設(shè)置 height:100%(圖片要被拉伸) */       
}

2、插入一個span標(biāo)簽，寫法有點不一樣（但是父元素浮動也會居中）

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