img标签在div中水平垂直居中--两种实现方式

 

 

 

 

第一种方式： text-align:center; vertical-align:middle;

 

div{
text-align: center;
vertical-align:middle;width: 400px;
height: 400px;
border: 1px solid #000;
}
img{vertical-align: middle}
span{height: 100%;vertical-align: middle;display: inline-block}

<div style="">
<span></span>
<img src="ad-pic.png" alt="" style="border: 1px solid #000;">
</div>

第二种方式  通过设置img为绝对定位，处于垂直和水平50%，然后平移自身宽高的50%

div{
position: relative;
width: 400px;
height: 400px;
border: 1px solid #000;
}
img{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}