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