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

Posted 2020-09-19 马玲俊

第一种方式： 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"  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%);
        }