將未知寬度對象居中在未知寬度容器中

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;   
}