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.
See Question&Answers more detail:os