What are the parameters that place the heart at the center of the page in the vertical dimension? Is it the margin: auto line? We also have 3 position: absolute lines. I thought that whenever these are used, there has to be something with position: relative to position the absolute entities against
I have reduced the previous code to this one which contains only 1 element because I am clueless as to the positioning concept presented here and perhaps with the simplicity of only dealing with a single element, I may get enlightened.
I am having a lot of difficulty in sorting out what does what in this code.
I realize that the code, as written, places the square in the center of the page - in both the H and V dimensions.
I thought that margin: auto by itself would do this but no - with margin: auto the square is centered at the top of the page.
So I guess the question becomes - how do
act to get the square into the middle of the browser window? Are the top, right, bottom, left margin values? If they are, why are they needed if margin is already set to auto? I need to get straightened out with this stuff. Thanks.
One guess I might make as to why it was picked is to avoid having to “chain” transform functions as that might be confusing as well (translate() has to happen before rotate() and adding it might make it less clear what the transform is doing, i.e. the rotation part).
Also, just as an aside, this technique is not even posted in the css-tricks article on centering (as far as i can tell).
You are centering the content inside the div, not the div itself. To center the div you have to make its parent container a flex container and set the properties for centering on the container.
Centering using flex/grid depends on the dimensions of the container. The child will be centered inside the parent relative to the parent dimensions.
For block-level elements centering horizontally is simple enough because they are already full width. In fact, for centering horizontally you can just set a left/right auto margin on the child and it will center horizontally without using flex/grid.
For vertical centering, the height of the container will determine where the center is and the height of containers is usually governed by the content. You can explicitly set the height using viewport units, or when using percentages, propagate the height down through all elements starting from the root element.
Thank you for taking the time to go through such a detailed explanation and I certainly intend to spend a couple of hours going through the examples provided. I was testing out the very first example and see what using different margin commands and values would do on this very basic example and got stuck right away with this code -
Yes, as a best practice, you should never mix position: absolute with <some-property>: auto. Because the value auto implies that it’s calculated “auto”-matically based on the “environment” it belongs to, while absolute suggests the opposite way, which is to ignore anything that could possibly cause any effect to it.