CSS – margin:auto – How it Works

Since there happens to be an exception for absolutely positioned elements, we”ll use auto value to center one vertically and horizontally. But before that, we need to find out when will margin:auto actually work like we want it to in an absolutely positioned element.

As mentioned before, auto will not work in floated, inline and absolute elements. All these elements already have decided on their layouts, so there is no use in using auto for the margins and expecting it to get centered just like that.

Hence, for an absolute element to be centered vertically, its top, height, and bottom values shouldn”t be auto.

The why, well that is so far, a mystery. It could be because of the typical vertical page flow, where page size increases height-wise. So, centering an element vertically in its container is not going to make it appear centered, relative to the page itself, unlike when it”s done horizontally (in most cases).

"auto" Taking Up Available Space

Using margin:auto to center a block element horizontally is a well known technique. But have you ever wondered why or how it works? To answer this, we first need to take a look at how margin:auto works. Also in the mix is what auto can possibly do in margins, if it works for vertical centering, and a few other issues.

"If all three of “left”, “width”, and “right” are “auto”: First set any “auto” values for “margin-left” and “margin-right” to 0… "

That pretty much says that for horizontal auto margins to seize equal spaces, the values for left, width and right shouldn”t be auto , their default value. So all we have to do is to give them some value in an absolutely positioned element. left and right should have equal values for perfect centering.

Faux Float By Taking Up Available Space

auto in both top and bottom margins is always computed to 0px (except for absolute elements). W3C spec says it like this:

Converting an element to absolute just so it can be centered vertically may not be a great idea. There are other options like flexbox and CSS transform which are more suitable for those.

"If none of the three is “auto”: If both “margin-left” and “margin-right” are “auto”, solve the equation under the extra constraint that the two margins get equal values"

“auto” Computed To 0px

This is where another W3C spec comes in:

However, this will work for horizontal margin sonly (more on the why later), and it also won”t work with floated and inline elements and by itself, it also cannot work in absolute and fixed positioned elements (we will however see how to make those work).

Now by combining all these, this is what we”ll get:

What Happens To Vertical Margins With The Value auto?

However, the latter seems to be an unlikely case – since elements which don”t collapse their margins – like Floats, and elements with overflow other than visible, still assign 0px vertical margins for auto.

It could also be because of the margin collapse effect (a collapse of adjacent elements” margins) which is another exception for the vertical margins.

The spec also mentions something similar for vertical margins.

Since auto in both right and left margins take up the "available" space equally, what do you think will happen when the value auto is given to only one of those?

But first, what does auto actually do?

Centering Absolutely Positioned Elements

That will defeat the initial purpose of using something like float. Hence auto will have a value of 0px in those elements.

If you ever want to flush an element on your page to right or left without the following elements wrapping it (like whats happens with float), remember there”s the option to use auto for margins.

The definition of auto varies with elements, element types and context. In margins, auto can mean one of two things: take up the available space or 0 px. These two will define different layouts for an element.

A width of value auto will have 0px margins. A block element”s width typically covers its container”s when it is auto or 100% and hence a margin auto will be computed to 0px in such a case.

auto will also not work on a typical block element if it doesn”t have a width. All the examples I showed you so far have widths.

“If none of the three 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…”

And maybe it”s because of this same reason, they decided to add an exception for absolute elements which can be centered vertically along the entire page”s height.

A left or right margin with auto will take up all of the "available" space making the element look like it has been flushed right or left.

“If “margin-top” or “margin-bottom” is “auto”, their used value is 0″

Conclusion

“If all three of “top”, “height”, and “bottom” are auto, set “top” to the static position…”

This is the most common use of margin auto we come across often. By assigning auto to the left and right margins of an element, they take up the available horizontal space in the element”s container equally – and thus the element gets centered.


Leave a Reply