Absolute Horizontal And Vertical Centering In CSS
- By Stephen Shaw
- August 9th, 2013
- 135 Comments
We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now! But actually (spoiler alert!) absolute centering only requires a declared height*1 and these styles:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}I’m not the pioneer of this method (yet I have dared to name it Absolute Centering), and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a particular article2.
There, Simon3 linked to this jsFiddle4 that blew every other method out of the water (the same method was also mentioned by Priit5 in the comments). Researching further, I had to use very specific keywords to find some6 other7 sources for this method.
Having never used this technique before, I put it to the test and discovered how incredible Absolute Centering really is.
Leave a comment on CodePen118, Smashing Magazine9, or message @shshaw10 on Twitter if you have any additional features or suggestions.
Find additional demos, a comparison table, and more on CodePen118.
Advantages: Link
- Cross-browser (including IE8-10)
- No special markup, minimal styles
- Responsive with percentages and min-/max-
- Use one class to center any content
- Centered regardless of padding (without
box-sizing!) - Blocks can easily be resized
- Works great on images
Caveats: Link
- Height must be declared (see Variable Height12)
- Recommend setting
overflow: autoto prevent content spillover (see Overflow13) - Doesn’t work on Windows Phone
Browser Compatibility: Link
Chrome, Firefox, Safari, Mobile Safari, IE8-10.
Absolute Centering was tested and works flawlessly in the latest versions of Chrome, Firefox, Safari, Mobile Safari, and even IE8-10.
Explanation Link
After researching specs and documentation, this is my understanding of how Absolute Centering works:
- In the normal content flow14,
margin: auto;equals ‘0’ for the top and bottom.
W3.org15:If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.
position: absolute;breaks the block out of the typical content flow, rendering the rest of the content as if that block weren’t there.
Developer.mozilla.org16:…an element that is positioned absolutely is taken out of the flow and thus takes up no space
- Setting
top: 0; left: 0; bottom: 0; right: 0;gives the browser a new bounding box for the block. At this point the block will fill all available space in its offset parent, which is the body orposition: relative;container. Developer.mozilla.org1817:For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).
- Giving the block a
widthor aheightprevents the block from taking up all available space and forces the browser to calculatemargin: autobased on the new bounding box. Developer.mozilla.org1817:The margin of the [absolutely positioned] element is then positioned inside these offsets.
- Since the block is absolutely positioned and therefore out of the normal flow, the browser gives equal values to
margin-topandmargin-bottomcentering the element in the bounds set earlier.
W3.org19:If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.
AKA: center the block vertically
Absolute Centering appears to be the intended use for margin: auto; based on the spec and should therefore work in every standards compliant browser.
TL;DR: Absolutely positioned elements aren’t rendered in the normal flow, so margin: auto; centers vertically within the bounds set by top: 0; left: 0; bottom: 0; right: 0;.
Within Container Link
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}With Absolute Centering, you can place your content block inside of a position: relative container to align the block within the container!
The rest of the demos will assume these styles are already included and will provide add-on classes to implement various features.
Absolute Center,
Within Container. Link
This box is absolutely centered, horizontally and vertically, within its container using position: relative
Within Viewport Link
.Absolute-Center.is-Fixed {
position: fixed;
z-index: 999;
}Want the content block centered in the viewport? Set it to position: fixed and give it a high z-index, like the modal on this page.
- Mobile Safari: The content block will be centered vertically in the whole document, not the viewport, if it is not within a
position: relativecontainer.
Offsets Link
.Absolute-Center.is-Right {
left: auto; right: 20px;
text-align: right;
}
.Absolute-Center.is-Left {
right: auto; left: 20px;
text-align: left;
} If you have a fixed header or need to add other offsets, simply add it in your content block’s styles like top: 70px;. As long as margin: auto; is declared, the content block will be vertically centered within the bounds you declare with top left bottom and right.
You can also stick your content block to the right or left while keeping it vertically centered, using right: 0; left: auto; to stick to the right or left: 0; right: auto; to stick to the left.
Vertical Center,
Align Right. Link
This box is absolutely centered vertically within its container, but stuck to the right with right: 0; left: auto;
Footnotes Link
- 1 https://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/2#Height
- 2 http://designshack.net/articles/css/how-to-center-anything-with-css
- 3 http://designshack.net/articles/css/how-to-center-anything-with-css/#comment-684580538
- 4 http://jsfiddle.net/mBBJM/1/
- 5 http://designshack.net/articles/css/how-to-center-anything-with-css/#comment-684580409
- 6 http://www.vanseodesign.com/css/vertical-centering/
- 7 http://www.student.oulu.fi/~laurirai/www/css/middle/
- 8 http://codepen.io/shshaw/details/gEiDt
- 9 https://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/#comments
- 10 http://twitter.com/shshaw
- 11 http://codepen.io/shshaw/details/gEiDt
- 12 https://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/2#Height
- 13 #Overflow
- 14 http://taligarsiel.com/Projects/howbrowserswork1.htm#Layout
- 15 http://www.w3.org/TR/CSS2/visudet.html#normal-block
- 16 https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning
- 17 https://developer.mozilla.org/en-US/docs/Web/CSS/position#Notes
- 18 https://developer.mozilla.org/en-US/docs/Web/CSS/position#Notes
- 19 http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.
