title: CSS - center big div inside smaller one + hidden overflow
body: <p><a href="http://jsfiddle.net/vT65S/" rel="nofollow">http://jsfiddle.net/vT65S/</a></p>
  
  <p>html: </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="wide1"&gt;test&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="wide2"&gt;test&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="wide3"&gt;test&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.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; } 
  </code></pre>
  
  <p>I would like to have all "test" in one vertical line (centered). I need use it in situation where I don't know width of the inner divs.</p>