title: Centering images horizontally in container div when height is set to 100%
body: <p>Sorry if this has been answered - I've tried virtually all the tips I've already come across so far on centering images without any luck. This image just refuses to center horizontally!</p>
  
  <p>JSFiddle <a href="http://jsfiddle.net/HkuMW/4/" rel="nofollow">here</a></p>
  
  <p><strong>HTML:</strong> <em>(Note: images are note mine, just taken from google as examples)</em></p>
  
  <p>Each image either receives "height:100%;" or "width:100%;" when loading depending on whether the height to width ratio is within or outside of the 4:3 ratio in landscape orientation.</p>
  
  <p>This is done to ensure the image completely fills the containing div no matter what size and shape it is.</p>
  
  <pre><code>&lt;div class="imgOuter"&gt;
      &lt;div class="imgInner"&gt;
          &lt;img src="http://www.woroni.com.au/wp-content/uploads/2013/12/Cars-Lamborghini-Free-Wallpaper.jpg" style="height: 100%;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="imgOuter"&gt;
      &lt;div class="imgInner"&gt;
          &lt;img src="http://cdn.acidcow.com/pics/20100118/celebrity_portraits_by_tom_munro_03.jpg" style="width: 100%;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <p>The main outer div is set to conform to the constant aspect ratio of 4:3
  The inner div adds a border internally to the outer div which must remain specifically sized.</p>
  
  <pre><code>div.imgOuter{
      float: left;
      position: relative;
      width: 33.3333%;
      padding-bottom: 25%;
      overflow:hidden;
      clear:none;
  }
  div.imgInner{
      position:absolute;
      top:0;bottom:0;left:0;right:0;
      overflow:hidden;
      text-align:center;
      border:2px solid #444;
      cursor:pointer;
  }
  div.imgInner&gt;img{
      display:block;
      position:absolute;
      top:0;bottom:0;left:0;right:0;
      margin:auto;
  }
  </code></pre>
  
  <p>.imgInner: I have tried text-align:center; tried additionally dimensioning with height and width @ 100%...</p>
  
  <p>You'll notice in the fiddle that the second image is in a portrait orientation and sits perfectly as expected centered vertically.</p>
  
  <p>If you take a landscape image and set the width to 100% instead of height, it also centers vertically without issue, leaving white space above and below its ratio is wider than 4:3.</p>
  
  <p>Only when the height is 100% does the image default to left alignment seemingly ignoring the left and right positioning.</p>
  
  <p>My only suspicion is that the div.imgOuter does not have a height, only a padding value. If thats the case then I'm stuck attempting to solve both scaling aspect ratios and center alignment :(</p>
  
  <p>Any suggestions?</p>