[CSS] transform: translate(-50%, -50%);

 

 

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

 

흔히 가운데 정렬을 할 때 많이 사용한다.

뭔가 가운데 정렬이라 하면 뭔가 저 top: 50% left: 50%만으로 될 것 같아 보였다.

(잘 모르는 나의 기준으로 봤을 때)

그런데 왜 가운데 정렬을 하고자 할때 매번 translate -50%, -50%가 쓰였다.

이 부분이 이해가 바로 되지 않아서 정리한 글

 

 

left: 50%를 적용하면 부모의 크기를 기준으로 적용된다.

부모 크기의 50%지점으로 사각형이 이동한 것을 볼 수 있다.

 

transform: translate(-50%, 0);을 적용하면

-50% : 왼쪽으로 본인의 크기의 50%만큼 이동

- 50%이 아니라 50%였다면 오른쪽으로 이동

위 사진과 비교했을 때 본인의 크기를 기준으로 반절 이동한 것을 볼 수 있다.

 

transform의 translate에서 %를 사용하면 요소 자신의 크기를 기준으로 이동하고,

position의 top/left에서 %를 사용하면 부모 요소의 크기를 기준으로 위치가 결정된다.

 

 

See the Pen transform: translate(-50%, -50%) by 이아름 (@aahreum) on CodePen.

 

 

 

 

 

참고하면 좋은 유튜브

https://youtu.be/rzD-cPhq02E?t=316