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

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;
}

在这里为它创建了一个 fiddle :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 兼容浏览器的方法。