title: Center Images inside Parent container
body: <p>Want to center images both vertically and horizontally without explicitly setting a height on their parents. I would like the height of the tallest image to be the height of the parent and center all other sibling images.</p>
  
  <p>The final results will look like <a href="http://fiddle.jshell.net/4myos5s2/" rel="noreferrer">http://fiddle.jshell.net/4myos5s2/</a> where the tall image sets the height of the parent.</p>
  
  <p>Using flexbox but still requires defining height for parent: <a href="http://jsfiddle.net/danield770/vc4cd02a/" rel="noreferrer">http://jsfiddle.net/danield770/vc4cd02a/</a>.</p>
  
  <pre><code>div {
      display: flex;
      justify-content: center; /* align horizontal */
      align-items: center; /* align vertical */
      border: 1px solid green;
      width: 100%;
      height: 80vw;
  }
  
  &lt;div&gt;
      &lt;img alt="No, he'll be an engineer." src="http://placehold.it/350x150" /&gt;
  &lt;/div&gt;
  </code></pre>