img水平垂直居中

第一种方式: 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>

第二种方式

 div{ 
            position: relative; 
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        img{
            position: absolute;
            top:50%; 
            left:50%;
            transform: translate(-50%,-50%);
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容