Why then typing 50% it doesn't center things in the middle?

Question

A lot of times then I type e.g. top:50%; or left:50%; it doesn't position anything right in the middle of the screen, regardless of the position attribute I use like position: relative; or position: absolute;.

Edit: I found out how to make it work, I need to add this, but why?
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

Answer 1

Because 50% in left are referring to 50% of width of parent, 50% in top are referring to 50% of height of parent.

It pushes the upper left corner of current element to center of the parent, only the upper left corner

But then 50%, 50% in translate() is referring to the current element, so it moves it left by half of its width and move it up by half of its height, so now the center of current element is the same as center of parent.

which is what we want to achieve.

Here is an illustration for you:

https://code.sololearn.com/WI14Az86d3Wm/?ref=app

Answer 2

Gordon so is there an invisible margin?

Answer 3

if you are referring to margin : 0 of body, yes.