title: How to both center and auto-scale an image?
body: <p>Probably two of the most common problems with CSS layouting:</p>
  
  <ol>
  <li>Centering both horizontally and vertically.</li>
  <li>Auto-scaling images to the viewport size (maintaining the aspect ratio and not overflowing vertically or horizontally).</li>
  </ol>
  
  <p>Individually, there are good solutions for both:</p>
  
  <ol>
  <li>Use <code>display: table</code> on the outer container element and <code>display: table-cell</code>, <code>vertical-align: middle</code> and <code>text-align: center</code> on the inner.</li>
  <li>Use <code>max-height: 100%</code> and <code>max-width: 100%</code> on the <code>img</code> element.</li>
  </ol>
  
  <p><a href="http://jsfiddle.net/jnkV6/" rel="nofollow">But combining both only does the centering</a>, even when using <code>height: 100%</code> and <code>width: 100%</code> on all elements surrounding the <code>img</code>.</p>
  
  <p>How can I achieve both targets at the same time without succumbing to hard-coded height and width values or JavaScript?</p>