javascript - 在未知宽度容器中居中未知宽度对象

Question

我有一个样式问题，我试图将一个宽图像相对于它的容器居中。问题是图像的宽度未知，所以我无法使用 left:50%, margin-left:-###px; 技巧，因为我不知道负边距值是多少会的。

我也不能使用 text-align:center; 因为图像比它的容器宽。

更复杂的是，容器的宽度也是未知的。

我很想避免为此使用 JavaScript，但仅使用 CSS 感觉就像一个很大的问题。

有人知道这里有什么神奇的解决方案吗？

更新:

需要支持:IE8+、Chrome、Safari、Firefox、Android。

我已经尝试了你们这些可爱的人提供的几个例子，但没有奏效(它们在大多数情况下都可以，但我的不行)。

@Vince - 我试过你的显示 block 技巧，当窗口比图像宽时效果很好，但当窗口不比图像宽时，它实际上变为“左对齐”。

参见 fiddle 示例。我添加了另一个容器来模拟一个狭窄的移动设备窗口。显然，这不会像 fiddle 中那样是硬编码的宽度。此外，img 宽度不会像示例中那样进行硬编码，但我正在尝试模拟呈现给我的情况。

http://jsfiddle.net/7n1bhzps/1/

请原谅丑陋的颜色。

更新 2:

接受了 dfsq 的回答。与上面相反，它不需要支持 IE8，因为问题出在移动分辨率上。 IE8 不是移动浏览器，因此不需要支持它。

谢谢大家。

Answer 1

将容器的最小宽度设置为您认为必要的任何值。将图像设置为显示为 block 并使用 margin: 0 auto; 技巧使其居中

HTML:

<div id="contain">
    <img src="http://i.imgur.com/xs8vh.jpg"/>
</div>

CSS:

#contain {
    min-width: 50px;
}
#contain img {
    display: block;
    margin: 0 auto;
}

JSFiddle:http://jsfiddle.net/j21a8ubo/