title: CSS flexbox image centering
body: <p>I have a variable set of images I'm displaying in a flexbox, and am trying to make sure the images vertically and horizontally align to their parent div. I've tried the usual vertical-align, text-align, max-width: 100%;, and margin: 0 auto;. Any good cross browser solutions to my dilemma that won't lead to warped/left-aligned images? </p>
  
  <p>Here's the CSS (in it's current borky form, I've also tried the other aforementioned centering CSS):</p>
  
  <pre><code>.collage{
      max-width: 100%;
      max-height: 100%;
      height: inherit;
      display: -webkit-box;     
      display: -moz-box; 
      display: -ms-flexbox;
      display: -webkit-flex; 
      display: inline-flex;   
      flex-direction: column;
  }
  
  .collage div{
      display: -webkit-box; 
      display: -moz-box;     
      display: -ms-flexbox;  
      display: -webkit-flex;
      display: inline-flex;  
      overflow: hidden;
      width: 100%;
  }
  
  .collage img{
      max-height: 100%;
  }
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/hSb93/3/" rel="nofollow">http://jsfiddle.net/hSb93/3/</a></p>