CSS Techniques – Absolute Horizontal And Vertical Centering In CSS
We’ve all seenmargin: 0 auto;
for horizontal centering, butmargin: auto;
has refused to work for vertical centering… until now! But actually (spoiler alert!). I’m not the pioneer of this method, 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 article. There, Simon linked to this jsFiddle that blew every other method out of the water (the same method was also mentioned by Priit in the comments). Researching further, I had to use very specific keywords to find some other sources for this method.
ADVANTAGES:
- 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
LIMITATIONS:
- Height must be declared (see Variable Height)
- Recommend setting
overflow: auto
to prevent content spillover (see Overflow) - Doesn’t work on Windows Phone
BROWSER COMPATIBILITY:
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
After researching specs and documentation, this is my understanding of how Absolute Centering works:
- In the normal content flow,
margin: auto;
equals ’0′ for the top and bottom.
W3.org: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.org:…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.org: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
width
or aheight
prevents the block from taking up all available space and forces the browser to calculatemargin: auto
based on the new bounding box.Developer.mozilla.org: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-top
andmargin-bottom
centering the element in the bounds set earlier.
W3.org: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;
.
Comments
Post a Comment