(CSS) position : absolute로 요소 정중앙에 위치 시키기

 

특정 요소를 absolute로 위치시킬 때, 부모 요소 기준으로 정중앙에 위치시키고 싶을 때가 있다. 

 

이때 top과 left를 각각 50%를 주면 정중앙에 올 것이라고 생각하기 쉽다. 

 

하지만 실제 적용시켜 보면 정 중앙에 오지 않는다. 

 

See the Pen position : absolute로 요소 정중앙에 위치 시키기(before) by 김다영 (@xnpzlttb-the-solid) on CodePen.

 

 

 

이는 top과 left 등이 요소 왼쪽 상단 모서리를 기준으로 하기 때문이다. 

 

따라서 위처럼  top과 left를 각각 50%를 주면 왼쪽 상단 모서리가 정중앙에 위치하게 된다.

 

그럼 요소 전체를 정 중앙에 배치하려면 어떻게 해야 할까

 

 top과 left를 각각 50%를 주고 나서, 추가로 transform: translate(-50%, -50%);를 줘야 한다. 

 

• transform : 요소 위치를 이동시키는 함수
• translate : 요소 위치를 수평과 수직 방향으로 이동시킴
• translate(-50%, -50%) : 요소의 가로 길이의 반만큼 수평으로, 세로 길이의 반만큼 수직으로 이동시킴

 

See the Pen position : absolute로 요소 정중앙에 위치 시키기 by 김다영 (@xnpzlttb-the-solid) on CodePen.