如何在不使用背景的情况下，使用HTML和CSS3创建响应迅速、垂直和水平居中的图像

我的目标是使图像在容器内垂直和水平居中，并且图像在不改变原始纵横比的情况下占据尽可能多的空间

使用{background size:contain；background position:center；background repeat:norepeat；}不是一个选项，因为我需要在图像的角上附加一个覆盖div。使用背景意味着包含的div不能精确地跟随图像大小

下面是一个使用flexbox的尝试。不幸的是，它不能在Firefox中工作（至少在linux上）。当容器的宽度大于给定高度的图像宽度时，Firefox会拉伸图像

这是另一次尝试，这次使用绝对定位w/左：50%；为了使第一个div居中并进行变换：平移（-50%，-50%）以使图像居中。结果是不可接受的，因为图像包装div（带有绿色“olivedrab”边框）不在Firefox上的图像周围（垂直调整窗口大小时在chrome中也是如此）。这意味着不能在图像上直接附加覆盖（并在调整大小时跟随）

注意：不需要Javascript。

这可以：

div{
宽度：30em；
高度：30公分；
显示器：flex；
对齐项目：居中；
证明内容：中心；
/*只是为了更好地说明这个例子*/
背景颜色：浅灰色；
边缘底部：1米；
}
img{
最大宽度：100%；
最大高度：100%；
}

div{
宽度：400px；
高度：400px；
线高：400px；
背景色：#中交；
垂直对齐：中间对齐；
位置：相对位置；
边框：1px纯黑；
}
img{
位置：绝对位置；
显示：块；
最大宽度：100%；
最大高度：100%；
保证金：自动；
垂直对齐：中间对齐；
宽度：自动；
高度：自动；
排名：0；
底部：0；
左：0；
右：0；
} 

---

在IE9和FF中测试。

您可以使用

display:table

和

display:table cell

来实现这一点@dward虽然它确实以400px×400px的图像为中心，但如果你调整窗口大小，图片就不会缩小。你看：@dward：不幸的是，这在Firefox（32）中不起作用，只有在Chrome中水平调整大小时才起作用。在linux上的Firefox 32中不起作用，问题与我的flexbox示例相同。很好的解决方案！但是，事实上，

div

除了

position:relative

和dimensions之外的属性在这里有点不相关，因为所有的“魔力”都是通过图像的绝对定位和

margin:auto

：尽管问题中的第一个示例使用了固定维度div，但这只是为了说明Firefox中的问题。目标是使图像完全响应，即调整大小以适应所有浏览器大小。答案以固定大小的div将图像居中，但不适用于宽度/高度为100%的div。

<style>
div {
    width: 400px;
    height: 400px;
    line-height: 400px;
    background-color: #cccccc;
    vertical-align: middle;
    position: relative;
    border: 1px solid black;
}

img {
    position: absolute; 
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    vertical-align: middle;
    width: auto;
    height: auto;
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
} 
</style>