This is a live redesign. If something looks broken, it probably is. Tell me?

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/

Post a comment If you post a tweet with a link to this page, it will appear here as a webmention (updated hourly).

Webmentions

No mentions yet.