title: Center image element in parent div
body: <p>How I can set center an image element inside a parent div? I would like to do this so that the middle of the image is always in the center of his parent. Also I want the image to always have 100% height (note: I don't want to stretch the image width).</p>
  
  <p>See here for an example: <a href="http://jsfiddle.net/Ex5ax/5/" rel="noreferrer">http://jsfiddle.net/Ex5ax/5/</a></p>
  
  <pre><code>&lt;div class="box"&gt;
    &lt;img src='featured.jpg' /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.box { height: 100%; width: 450px; border: 2px solid red; background: green; overflow: hidden; }
  .box img { height: 100%; width: auto; text-align: center; }
  </code></pre>