Last Updated: February 25, 2016
·
10.34K
· moak

Dead center Positioning css-only (horizontal & vertical)

From Smashing Magazine

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Advantages:

  • Cross-browser (including IE8-10 without hacks!)
  • No special markup, minimal styles
  • Responsive with percentages and min-/max-
  • Centered regardless of padding (without box-sizing!)
  • Works great on images

Caveats:

  • Height must be declared (see Variable Height)
  • Recommend setting overflow: auto to prevent content spillover (see Overflow)

See this Fiddle