Vertical centering of containers with variable max- but defined min-height

tl;dr: vertical centering is still lots of fun if your use case includes containers of variable height, but with a set min-height. If you have no min-height, you can pick either way and you're done.

CSS (and browser support in 2014) offers two possible solutions, but each comes with its own drawback:

• Use display: table;
  Using table-display for vertical centering will get you far, but not past Firefox who will not use min-height on tables or CSS tables.
  Check the CodePen for display: table;
• Use display: flex;
  Using flexbox for vertical centering will get you far, but not past IE11 who will not use min-height on elements with display: flex.
  Check the CodePen for display: flex;

My solution: Use flexbox where possible (feature detection) with table-display as fallback; also use table-display for IE11 despite successful flexbox detection.

Pro tip: you can target IE11 (and IE10) using a MS specific media-query, since conditional comments are no longer supported by IE10+. Here's the (slighhtly hacky, but still nicer than UA sniffing) snippet:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
}

src: http://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/