4

我遇到了以下技术，可以在 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/

我没有在网上找到任何针对这种技术的提示。

有没有我遗漏的警告？使用起来“安全”吗？

4

1 回答 1

4

这种方法有充分的根据并记录在 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 兼容浏览器的方法。

于 2013-06-02T21:23:49.417 回答