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
Written by Mark Vaughn
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#