position: absolute takes the element out of the normal flow, since there isn’t any
relative parent, it goes to the top left of the page.
top, bottom, left and right makes the element takes the whole space, in this case, it will occupy the whole page.
width, height by giving the element a width and height, it will respect that instead of filling the whole page. And it will force the browser to calculate the value of
margin: auto this is where the trick lies, normally,
margin: auto works only for centering the element horizontally. But because we make the element
absolute, the browser will give equal value to
It’s quite complex why this happens, and I also don’t understand it fully, but it looks like it have something to do with margin collapsing.
I also found this full-article: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/