[CSS] postition absolute • fixed 했을 때 가운데정렬

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

나는 개발할 때 CSS 작성하는게 제일 햇갈리고 어렵다...

원래 필요할때마다 찾아쓰라고는 하는데 할때마다 멈칫멈칫 하는게 아주 기분이 나쁘다.

그래서 그냥 기록해놓는게 편하겠다 싶어서 기록하기로 하였다.

아주아주 간단하고 복사해서 붙여놓으면 바로 쓸 수 있다.

아주 좋다고 할 수 있다.

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

 

중요한건 2번째 줄 코드인데

translate(-50%, -50%): 백분율 값을 사용하여 요소를 수평 및 수직으로 이동

-50% 값은 요소의 너비의 반만큼을 왼쪽(수평)으로, 높이의 반만큼을 위쪽(수직)으로 이동시킨다.

이렇게 하면 요소가 포함하는 요소 내에서 수평 및 수직으로 가운데 정렬된다.