0

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

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%);

25th Mar 2020, 2:55 PM
Danial Azadpour
Danial Azadpour - avatar
3 Réponses
+ 3
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
25th Mar 2020, 3:31 PM
Gordon
Gordon - avatar
0
Gordon so is there an invisible margin?
26th Mar 2020, 5:01 AM
Danial Azadpour
Danial Azadpour - avatar
0
if you are referring to margin : 0 of body, yes.
26th Mar 2020, 5:54 AM
Gordon
Gordon - avatar