css - 绝对垂直居中技术与图像 - 为什么 Firefox 缩放图像不同？

Question

实践中的技术（工作正常）：

http://coding.smashingmagazine.com/2013/08/09/absolute-horizo​​ntal -vertical-centering-css （文章中的第一个例子）

结果不同：

Chrome/Safari 使用此技术从“掩码”div 中的垂直中心“缩放”100% 宽度/高度的自动图像，固定高度为 300 像素，宽度为 100%。因此，当您增加容器元素的宽度时，图像在缩小时会在顶部和底部被均匀地裁剪，但左右边缘会“粘”在容器上（没有水平裁剪）。

.container
{
overflow: hidden;
position: relative;
width: 100%;
min-height: 310px;
min-width: 462px;
}

img
{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: block;
width: 100%;
min-height: 310px;
margin: auto;
}

这是小提琴（对不起内联代码）供您查看：

http://jsfiddle.net/KgJbR/

然而，使用 Firefox，图像将从左上角的锚点“缩放”，而不是死点的锚点，导致图像仅沿底部裁剪。这只是两个引擎如何使用这种方法的低级差异吗？

在这张图片中，Firefox 位于左侧，而 Safari 位于右侧。红色边框表示图像被裁剪的位置。

Answer 1

浏览器确实处理绝对居中有点不同！虽然在这种情况下，我建议使用 a来获得更好的定位选项，但您可以使用和background-image来欺骗 Firefox 使图像正确居中。这迫使 Firefox 开始计算以在容器边界之外居中，而不是从顶部开始元素并且只溢出底部。top: -100%bottom: -100%

这是你的小提琴，它已经过调整以解决这个问题：http: //jsfiddle.net/shshaw/KgJbR/3/