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.
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.
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.
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.
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.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With