What does "top: 0; left: 0; bottom: 0; right: 0;" mean?

Question

I am reading a guide from this site about a technique on centering elements.

I read the CSS code,

.Absolute-Center {   margin: auto;   position: absolute;   top: 0; left: 0; bottom: 0; right: 0; } 

And I read the explanation too.

But what I don't understand is the part that explains "top: 0; left: 0; bottom: 0; right: 0;".

It says,

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 or position: 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).

What does this mean? Bounding box? Fill all the available space?

How does "top: 0; left: 0; bottom: 0; right: 0;" work? does it take the 4 sides of a box and stretch them to fill the container? Is that how the values work?

What actually happens when I set "top: 0; left: 0; bottom: 0; right: 0;"?

I'm completely lost at this explanation and I would like somebody to rephrase, restate and explain it to me in a more simple and understandable fashion.

Thank you.

Answer 1

What happens when you use left and right (or top and bottom) at the same time is confusing because the spec [6.3. Absolute positioning] tells us that:

For absolutely positioned elements whose containing block is based on a block-level element, this property is an offset from the padding edge of that element.

So how can setting position affect the size of an element? The reason stems from how widths are calculated, which is buried in another section of the spec, [8.1. The width of absolute or fixed positioned, non-replaced elements].

If you specify both left and right and your element's width is not auto, then what you are saying really doesn't make sense, and right is ignored (all statements apply equally well to top/bottom/height):

If none of left/right/width is auto...the values are over-constrained, ignore the value for left (in case the direction property of the containing block is rtl) or right (in case direction is ltr) and solve for that value.

But if your element has no width set, or width is (the default) auto, this rule kicks in:

If width is auto, left and right are not auto, then solve for width.

Finally, the equation given that determines the 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

We can clearly see that after plugging in our values for left and right and the others, width is the unsolved (and unconstrained) variable, which will turn out to be width of containing box - left - right (more or less) or to put it another way: "fill in the space between the offsets".