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

来源：互联网发布：sqlserver删除主键约束编辑：程序博客网时间：2024/04/30 06:20

看过网上其他人的方法，大多很复杂。本例的方法十分简单，而且图片尺寸超过外围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这样很小很小的值，一劳永逸了。

1 0