Top: 0; left :0; vs transform: translate(0,0);

Hi!

What is stand for the transform translate? As i know is to move element but, When use it like

top 50%;
left: 50%;
position: absolute;

With the logic use it with:

transform: translate(-50%,-50%);

And when not please explain? I try to use always with translate options included but sometimes is break the layout what i want with translate and without it works fine??

Explain?

Thanks.

1 Like
top 50%;
left: 50%;
position: absolute;

This is saying “position the element 50% in from the top and 50% in from the left of the nearest parent container that has position: relative set (or from the body if there is not relatively positioned parent)”

transform: translate(-50%,-50%);

This is basically saying “move the element 50% of its own width to the left and 50% of its own height upwards”. However, it just moves it visually, nothing will fill in the gap where it actually is.

2 Likes

but shouldn’t we ease ourselves and control the element from the top, left, etc ? I mean something like this

top:35%;
left:40%;