纯css实现未知尺寸图片在DIV中垂直水平居中（超简单）

最新推荐文章于 2023-08-25 14:28:52 发布

阿生先生

最新推荐文章于 2023-08-25 14:28:52 发布

阅读量6.8k

点赞数 3

分类专栏： Web前端 h5 文章标签： web前端 html css 图片居中

本文链接：https://blog.csdn.net/as1200/article/details/51513064

版权

Web前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

看过网上其他人的方法，大多很复杂。本例的方法十分简单，而且图片尺寸超过外围DIV仍然能保持居中。先看效果图

来看实现效果的css代码：

        div{
            position: relative;
            left:100px;
            top:100px;
            border: solid 1px red;
            overflow: hidden;
        }
        img{
            position: absolute;
            margin: auto;
            top: -9999px;
            right: -9999px;
            bottom: -9999px;
            left: -9999px;
        }

是不是超级简单？下面看看html代码：

<div style="width:100px; height:100px;">
    <img src="dog.jpg" alt=""/>
</div>
<div style="width:300px; height:300px;">
    <img src="dog.jpg" alt=""/>
</div>

上面html代码是两个图片的例子。怎么样，是不是html结构很简单？

本人实测浏览器有：Chrome 49 、Firefox 46、IE7/8/9/10，只有IE7不兼容，其他的都兼容。

简单解释：这里img{}里的属性全部都是必需的，外围DIV只有position: relative;是必需的，其他的根据实际情况添加。如果图片尺寸小于外围div，css中，top、right、bottom、left可以为0。但如果图片尺寸大于外围div，则需要把这四个属性设置为负值，图片越大，负值越小，所以我就干脆给个-9999px这样很小很小的值，一劳永逸了。