img标签在div中水平垂直居中 vertical-align: middle无效解决方法

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

最主要，一定要  

<span></span>

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

        }