水平居中的图像溢出其容器

Question

我试图将一些溢出其容器div的图像（水平）居中。

容器（和图像，就此而言）的高度为160像素，我想保持它们的高度，即使在较小的屏幕尺寸 - 但仍然保持图像水平居中。

我试过margin: 0 auto;没有运气。

我遇到了一个半解决方案，建议在容器div上使用text-align: center;并在图像上使用margin: 0 -100%;。但是，此解决方案似乎只适用于基于webkit的浏览器。

例如。 Firefox的结果如下：

HTML：

<div class="row-fluid">
    <div class="span6">
        <a>
            <img src="image1.jpg">
        </a>
    </div>
    <div class="span6">
        <a>
            <img src="image2.jpg">
        </a>
    </div>
</div>

CSS：

.span6{
    height: 160px;
    overflow: hidden;
    text-align: center;
    padding: 0;
}


.span6 img{
    height: 160px;
    width: auto;
    margin: 0 -100%; /*Only works for webkit based browsers*/
}

有什么想法吗？提前谢谢。

编辑：

我发现将margin: 0 -100%;编辑为margin: 0 -50%;可以解决这个问题（包括Chrome，Firefox，IE等）。然而，我会选择安德烈的解决方案，因为我认为它更可能更清洁。

Answer 1

可能会有所帮助

.span {
    display: flex;
    align-items: center;
    justify-content: center;
}