Hello,
could sb explain why in challenges with CSS graphics (e.g. this one: https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-graphic-using-css), the top, left, right, bottom properties are all set to zero, and still the div they describe is located in the center of the page? What are they away from at zero distance? And as soon as you delete the properties, the div moves to the top left corner, even though its margin is set to auto, so it should be centered along the horizontal axis, shouldn’t it?
Would appreciate any tips.
Thank you,
–
Bard Andron
If I’m not mistaken, margin: auto only centers the item horizontally on the page. By setting the element to absolute positioning with each margin set to 0, it tries to position it at 0px from the left, top, right, and bottom, which is impossible. But since the margin is auto, with absolute positioning, the margins will auto adjust to put it in between the two corners, or directly in the center.
While it’s a confusing way to look at it, it essentially just makes the object be centered both horizontally and vertically.
1 Like
Thank you for the answer. I had never thought the zero margin is impossible 
the margins will auto adjust to put it in between the two corners
What corners do you have in mind?
top: 0, left: 0 puts it top left corner and the opposites put it bottom right. So the middle of the two is right in the middle of the page!
1 Like
Ok, got it. This is brilliant!