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

        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"  style="border: 1px solid #000;">
</div>

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