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

最新推荐文章于 2022-03-24 18:18:42 发布

weixin_30305735

最新推荐文章于 2022-03-24 18:18:42 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alinjj/p/6884132.html

本文介绍两种使图片在网页中水平及垂直居中的方法。第一种使用CSS的text-align和vertical-align属性；第二种采用绝对定位结合transform平移实现。这两种方法适用于不同场景，帮助开发者灵活应对布局需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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