Question

我遇到了以下技术，将图像垂直居中在DIV元素中。

<div>
    <img src="someimage.png" />
</div>

div {
    position:relative;
    width:400px;
    height:300px;
    border: solid 1px #cccccc;
}

img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

在这里创建了一个小提琴：http://jsfiddle.net/MryZv/1/

我没有在网上找到任何关于这种技术的小贴士。

我有遗漏吗？它是安全的吗？使用？

Answer 1

这个方法是有根据的，并在CSS 2.1规范的第10.6.4节和第10.6.5节（绝对定位，未替换/替换元素）中进行了记录：

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

绝对定位元素的高度根据以下约束计算：

   'top' + 'margin-top' + 'border-top-width' + 'padding-top' 
+ 'height' 
+ 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' 
= height of containing block

对于图像，高度可以设置为图像的固有高度，除非您另外限制它。

如果margin-top和margin-bottom使用auto值，则通过假设它们相等来计算这些边距，这样可以进行垂直居中。

类似的逻辑适用于计算宽度。

除非您有可能产生溢出条件的大图像，否则这种方法将适用于符合CSS 2.1的浏览器。

这是在HTML中垂直+水平居中图像的合法方式吗？

1 个答案: