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