Javascript 在未知宽度容器中居中未知宽度对象

我有一个风格问题，我试图中心一个广泛的形象相对于它的容器。问题是图像的宽度未知，因此我无法执行

左：50%，左边距：-###px技巧，因为我不知道负边距值是多少

我也不能使用
文本对齐：居中因为图像比其容器宽

更为复杂的是，容器的宽度也不得而知


我很想避免使用JavaScript来实现这一点，但对于CSS
，这就像是一个大问题

有人知道这里有什么神奇的解决办法吗

更新：

所需支持：IE8+、Chrome、Safari、Firefox、Android

我试过你们这些可爱的人提供的几个例子，但都不起作用（他们在大多数情况下都能起作用，但我的情况却不行）

@文斯-我尝试了你的显示块技巧，当窗口比图像宽时效果很好，但当窗口不比图像宽时，它实际上变成了“左对齐”

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


请原谅这些难看的颜色

更新2:

接受dfsq的回答。与上述相反，它不需要支持IE8，因为问题在于移动解决方案。IE8不是移动浏览器，因此不需要支持它

谢谢大家。
如果您将X的CSS设置为
边距：0px自动它应该在父容器中居中。
有时居中不起作用，但这也可能是与浏览器相关的问题

如果可以调整HTML，则可以将要居中的元素放在
元素的单元格中，单元格位于其两侧。IE8和早期版本就是这样做的，不过现在不推荐这样做。
您可以使用CSS
transofrm:translateX（-50%）
来移动未知宽度的图像。这项技术允许相对于容器的任何宽度的图像居中


.wrap{
利润率：0.10px160px；
宽度：300px；
高度：75px；
边框：3倍红色实心；
位置：相对位置；
溢出：隐藏；
}
.wrap:悬停{
溢出：继承；
}
.包裹img{
位置：绝对位置；
左：50%；
-ms转换：translateX（-50%）；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
}
将容器的最小宽度设置为您认为必要的任何值。设置图像显示为块，并使用
边距：0自动居中技巧

HTML:

jsIDLE:
如果对象及其容器的宽度未知，则使用

.center-block{
    display: table;
    margin:0 auto;
    float:none;   
}

您需要什么浏览器支持？您可以使用吗？您可以使图像最大宽度为100%，并将其居中<代码>图像{max width:100%；边距：0 auto；}
您知道容器的宽度吗？尝试将
文本对齐：中心
添加到父级，因为
图像
是
内联块
它将
对齐
中心
并添加最大宽度和最小宽度？为什么不呢？一旦渲染完成，宽度就足够让
auto
工作了。谢谢你的回答！不幸的是，这不符合我的情况。有关详细信息，请参阅问题更新。如果图像比容器宽，是否需要使容器溢出？为什么需要设置最小宽度？
margin:0 auto
要求包含元素设置静态宽度，无论是
最小宽度
、
最大宽度
还是
宽度
。由于询问者不知道容器的宽度，因此将图像居中（imo）最安全的方法是使用
min width:1px在不影响任何其他元素的情况下Hanks Vince，我尝试了一下，但遇到了一个问题。请参阅问题更新。遗憾的是，这是默认的浏览器行为，因为“居中”一个突破其边界的元素。我需要在现实生活中的用例中查看您的代码，以帮助您进一步了解dfsq，不幸的是，我需要IE8的支持。你能想出一个足够的退路吗？对于IE8，我会取消图像的position:absolute，并在父容器上添加text align:center（使用条件样式表的技巧）。因此，小图像将居中，宽图像将粘贴到左侧。对IE8来说已经足够了。我在说什么？这仅适用于移动分辨率。IE8不是一款移动浏览器，所以我甚至不用担心在这个分辨率下支持它。谢谢你！
#contain {
    min-width: 50px;
}
#contain img {
    display: block;
    margin: 0 auto;
}

.center-block{
    display: table;
    margin:0 auto;
    float:none;   
}