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%였다면 오른쪽으로 이동
위 사진과 비교했을 때 본인의 크기를 기준으로 반절 이동한 것을 볼 수 있다.
%를 사용하면 태그(본인)의 크기를 기준으로 움직인다. (부모 기준 X)
See the Pen transform: translate(-50%, -50%) by 이아름 (@aahreum) on CodePen.
참고하면 좋은 유튜브
https://youtu.be/rzD-cPhq02E?t=316
728x90
