title: Center Oversized Image in Div
body: <p>I have been trying to sort out how to center an oversized image within a div using css only.</p>
  
  <p>We are using a fluid layout, so the width of the image containers varies as the page width does (height of div is fixed).  The image sits within a div, withvalue  an inset boxshadow so as to appear as if you are looking through the page at the image.</p>
  
  <p>The image itself has been sized to fill the surrounding div at its widest possible value (the design has a <code>max-width</code> value).</p>
  
  <p>It is pretty easy to do if the image is smaller than the surrounding div:</p>
  
  <pre class="lang-css prettyprint-override"><code>margin-left: auto;
  margin-right: auto;
  display: block; 
  </code></pre>
  
  <p>But when the image is larger than the div it simply starts at the left edge and is off center to the right (we are using <code>overflow: hidden</code>).</p>
  
  <p>We could assign a <code>width=100%</code>, but browsers do a lousy job of resizing images and the web design centers around high quality imagery.</p>
  
  <p>Any ideas on centering the image so that <code>overflow:hidden</code> cuts off both edges evenly?</p>