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.
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 margin-top and margin-bottom.
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.