title: CSS - Center content that's wider than the page
body: <p>Here's a simple puzzle that's been frustrating me for a while today:</p>
  
  <p>Consider this page markup:</p>
  
  <pre><code>&lt;head&gt;
      &lt;style type="text/css"&gt;
          #wrapper { overflow: hidden; }
          #content { width: 750px; height: 100px; background: orange; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="content"&gt;Foo bar&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How can I get <code>div#content</code> centered in the page <em>regardless of viewport width</em>?</p>
  
  <p>I've tried a variety of tricks (including <code>text-align: center; display: inline-block;</code>) and absolute positioning, but with all of them the <code>div#content</code> is left-aligned when the browser window is brought under 750px in width.</p>
  
  <p>I've seen a few high-profile websites do this in the past. For example on Apple.com when they advertised the new retina iPad: the iPad pictured was a very wide image that extended past the main page area (note it was not a CSS background image of the <code>&lt;body&gt;</code> element), but it didn't cause scrolling when the browser window only fit the main page content. Unfortunately I can't seem to find any existing sites that do this so I can't find a reference.</p>
  
  <p>Thanks.</p>