img在div左右垂直居中，图片撑满整个div

1、img前面插入空标签，左右垂直居中

如果图片比div大，那么图片宽度会缩小到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标签，写法有点不一样（但是父元素浮动也会居中）

    
   


.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小都会,图片会被拉伸）

             


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