Why does "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto" actually center?
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.)
The left and right (and top and bottom) properties don't define width per se but rather the offset of the relative margins from the parents respective side.
In the absence of a defined width and with the offsets declared as zero, the width is calculated based on the offsets.
Giving the block a width or a height prevents the block from taking up all available space and forces the browser to calculate margin: auto based on the new bounding box
MDN - on "Top"...and the same applies to the other properties.
For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.
Smashing Magazine Article with more detail
Thanks to j08691 for the link