html - CSS-大きなdivを小さなdivの中央に配置+非表示のオーバーフロー

Question

http://jsfiddle.net/vT65S/

html：

<div class="container">
    <div class="wide1">test</div>
</div>

<div class="container">
    <div class="wide2">test</div>
</div>

<div class="container">
    <div class="wide3">test</div>
</div> 

css：

.container { width: 100%; text-align: center; margin: 20px 0; overflow: hidden; }
.container div { background: red; margin: 0 auto; }

.wide1 { width: 100px; }
.wide2 { width: 600px; } 
.wide3 { width: 1100px; } 

すべての「テスト」を1本の縦線（中央）に配置したいと思います。内側のdivの幅がわからない状況で使用する必要があります。

Answer 1

何を中心に？外側のコンテナdiv？のようなもので、内側のdivの幅をオーバーライドする必要がありますmax-width: 100%。

例： http： //jsfiddle.net/vT65S/1/

.container div { background: red; margin: 0 auto; max-width: 100% }

Answer 2

とった！しかし、JavaScriptを使用すると... http：//jsfiddle.net/vT65S/10/

jQuery(function($){
    $(".container > *").each(function(){
       var m = ($(this).parent().innerWidth() - $(this).outerWidth())/2;
       $(this).css("margin-left", m);
    });
});

たぶん純粋なCSSを使った解決策があります（？）

Answer 3

同じ問題が発生しました-CSS3translateXで解決しました

.container div{
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}