title: Vertically center content in a box with a fixed aspect ratio using pure CSS?
body: <p>Using HTML/CSS, I'm trying to create the following:</p>
  
  <ul>
  <li>a fluid-size box with a fixed aspect ratio (16:9)</li>
  <li>a 50% black overlay inside the box</li>
  <li>vertically centered arbitrary content on top of the overlay</li>
  </ul>
  
  <p>I combined a couple of techniques that I found:</p>
  
  <ul>
  <li>vertical centering: <a href="http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/" rel="nofollow">http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/</a></li>
  <li>maintaining aspect ratio: <a href="http://martinbean.co.uk/blog/2013/09/12/maintaining-aspect-ratio-in-css/" rel="nofollow">http://martinbean.co.uk/blog/2013/09/12/maintaining-aspect-ratio-in-css/</a></li>
  </ul>
  
  <p>to arrive at something pretty close to the target:</p>
  
  <p><a href="http://codepen.io/troywarr/pen/zxNdKP?editors=110" rel="nofollow">http://codepen.io/troywarr/pen/zxNdKP?editors=110</a></p>
  
  <p>That looks great in a 1280px wide viewport, but if you stretch the browser narrower or wider, you'll see that the <code>.overlay</code> maintains a fixed height while the <code>.container</code> resizes fluidly while still maintaining a 16:9 aspect ratio.</p>
  
  <p>If I could set the value of line 20 to <code>100%</code> and thus have <code>.overlay</code> expand to the visual height of <code>.container</code>, I'd be golden. It's understandable why that doesn't work (<code>.container</code> has an actual height of <code>0</code>), but I'm stumped as to what to try next.</p>
  
  <p>Please keep in mind that I may be going about this all wrong, and there may be a completely different approach that works better. Ultimately, all that's important to me is:</p>
  
  <ul>
  <li>cross-browser support back to IE10</li>
  <li>HTML/CSS only (as I could just add some JS to what I have now and get it to work well enough)</li>
  </ul>
  
  <p>Thanks for any help!</p>