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

Question

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

我也无法使用text-align:center;因为图片比它的容器宽。

为了使问题更复杂，容器的宽度也是未知的。

我非常希望避免使用JavaScript，但感觉只是CSS的大问题。

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

更新

所需支持：IE8 +，Chrome，Safari，Firefox，Android。

我尝试了一些你没有工作过的可爱的人提供的例子（他们会在大多数情况下工作，但不是我的工作）。

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

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

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

请原谅可怕的颜色。

更新2：

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

谢谢大家。

Answer 1

将容器的最小宽度设置为您认为必要的任何值。将图像设置为显示为块并使用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/

Answer 2

您可以使用CSS transofrm: translateX(-50%)来移动未知宽度的图像。该技术允许将相对于容器的任何宽度的图像居中。

.wrap {
    margin: 0 0 10px 160px;
    width: 300px;
    height: 75px;
    border: 3px red solid;
    position: relative;
    overflow: hidden;
}
.wrap:hover {
    overflow: inherit;
}
.wrap img {
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

<div class="wrap">
    <img src="http://lorempixel.com/600/75/food/3" alt="">
</div>

<div class="wrap">
    <img src="http://lorempixel.com/100/75/food/4" alt="">
</div>

检查支持http://caniuse.com/#feat=transforms2d

Answer 3

如果将X的CSS设置为margin:0px auto;，则应将其置于父容器中。

Answer 4

有时居中不起作用，但这也可能是与浏览器相关的问题。

如果您可以调整HTML，则可以将元素置于<table>元素的单元格中心，并在其两侧放置一个单元格。这是IE8及更早版本的完成方式，但现在不推荐使用。

Answer 5

如果物体及其容器的宽度未知，则使用

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