In the FCC Beta version => Applied visual design, the code in the snippet below is given to us. The .heart div has this positioning:
Since there is no other item which is positioned, it is positioned relative to the body element. My question is: Why is it showing in the center of the screen? Is it because all sides “pull” the element to the same extent? Is it a good practice for centering elements?
Wow, this is a really good question
I didn’t know it at first until I read further. Someone asked the same question 2 years ago on StackOverflow apparently. It all made sense after reading the definition of what it is actually doing.
Essentially, the left, right, top and bottom is setting a new boundary for the content to be center.
Here is a codepen of what it meant. You gonna need to look at it in full view.
Thank you! After experimenting with your pen I would like to add this - As you said the ‘top’, ‘right’, ‘bottom’ and ‘left’ properties set the boundaries, but it is the margin: auto which centers the element within the boundaries, both horizontally and vertically.
Yes, when you say margin:auto it will center your content, so that its it.