Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto" actually center?

Tags:

html

css

I'm pretty proficient when it comes to CSS but today I stumbled over a snippet that got me head-scratching (here and here).

I never thought that one can center an absolutely positioned element via margin: 0 auto but given the element in question has a set width and there's left: 0 and right: 0, it actually seems to work:

#parent
{
    background: #999;
    height: 300px;
    position: relative;
    width: 300px;
}

#child
{
    background: #333;
    height: 50px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 50px;
}
<div id="parent">
    <div id="child"></div>
</div>

(JSFiddle)

I always thought left: 0 and right: 0 will dictate the element's width (100% of it's first relatively positioned parent) but it seems width takes precedence here and therefore makes margin: 0 auto work.

Is this defined behavior? Can I find something about it in any spec? I googled around a bit but came up with nothing useful.

like image 607
maryisdead Avatar asked Mar 25 '15 16:03

maryisdead


People also ask

Does margin auto work on position absolute?

If the element is position absolutely, then it isn't relative, or in reference to any object - including the page itself. So margin: auto; can't decide where the middle is.

Why is margin 0 auto?

margin:0 auto; 0 is for top-bottom and auto for left-right. It means that left and right margin will take auto margin according to the width of the element and the width of the container. Generally if you want to put any element at center position then margin:auto works perfectly.

Why does position absolute affect width?

Because the element, which you give absolute position take the width from his parent and didn't behave as a block element. It takes the width and height from its content. And only when the content is relatively positioned.


Video Answer


1 Answers

This is accounted for in section 10.3.7 of the CSS2.1 spec:

The constraint that determines the used values for these elements is:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

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 [...]

As you can see, auto margins on both sides behave the same for absolutely-positioned elements as they do for non-positioned block-level elements, provided that the left and right offsets, as well as width, are not auto.

Interestingly, only for absolutely-positioned elements, this applies to top, height and bottom as well, which essentially means that it is possible to vertically center an absolutely-positioned element using auto margins. Again, this is provided that the three properties above are not auto, and the respective margins are auto. (In your case, this means margin: auto rather than margin: 0 auto as the latter zeroes out the vertical margins.)

like image 109
BoltClock Avatar answered Oct 02 '22 10:10

BoltClock