(CSS) absolute + transform으로 중앙 정렬하는 방법 (완전 이해 버전)

웹 작업을 하다 보면

“이 요소를 정확히 가운데에 놓고 싶은데 왜 이렇게 안 맞지?”

이런 순간이 꼭 옵니다.
특히 가로·세로 모두 중앙 정렬은 CSS에서 은근히 헷갈리는 포인트인데요,
그중에서도 가장 많이 쓰이는 방법이 바로 👇

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

오늘은 이 코드가 왜 중앙 정렬이 되는지,
그리고 언제 쓰면 좋은지까지 차근차근 설명드리겠습니다.

---

1️⃣ 기본 개념부터 잡고 갈게요

position: absolute란?

absolute는 부모 요소를 기준으로 위치를 지정하는 속성입니다.
단, 부모 중에 position: relative / absolute / fixed가 있어야
그 요소를 기준으로 잡습니다.

.parent {
  position: relative;
}
.child {
  position: absolute;
}

⚠️ 부모에 position: relative를 안 주면
브라우저 전체(body)를 기준으로 잡혀버립니다.

---

2️⃣ top: 50%, left: 50%만 쓰면 왜 어긋날까?

많이들 처음에 이렇게 씁니다.

.child {
  position: absolute;
  top: 50%;
  left: 50%;
}

이 상태에서 보면
👉 요소의 왼쪽 상단 모서리가 가운데로 갑니다.

즉,

• ❌ 요소 자체가 중앙 ❌
• ⭕ 요소의 시작점만 중앙 ⭕

그래서 뭔가 오른쪽 아래로 밀려 보이는 현상이 생깁니다.

---

3️⃣ 그래서 등장하는 transform: translate(-50%, -50%)

여기서 핵심이 바로 이 줄입니다.

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

이 뜻은?

• 자기 자신의 너비의 50%만큼 왼쪽으로 이동
• 자기 자신의 높이의 50%만큼 위로 이동

👉 즉,
top: 50%; left: 50%;로 기준점은 중앙에 놓고,
translate(-50%, -50%)로 자기 크기의 반만큼 되돌리는 방식입니다.

그래서 결과적으로
🎯 요소의 정확한 중심이 중앙에 위치하게 됩니다.

---

4️⃣ 완성 코드 (가장 많이 쓰는 형태)

<div class="parent">
  <div class="child">중앙 정렬</div>
</div>

.parent {
  position: relative;
  width: 100%;
  height: 300px;
  background: #f5f5f5;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

📌 이 방식의 장점

• 요소 크기가 고정이든, 가변이든 상관 없음
• 가로·세로 중앙 정렬을 한 번에 해결
• 반응형에서도 안정적

---

5️⃣ 이 방법은 언제 쓰면 좋을까요?

이 방식은 특히 이런 경우에 잘 어울립니다.

✔ 모달, 팝업 중앙 배치
✔ 이미지 위 텍스트 오버레이
✔ 특정 영역 기준 정확한 중앙 배치
✔ Flex를 쓰기 애매한 레거시 구조

반대로,

• 단순 텍스트 정렬
• 리스트 정렬

같은 경우엔 flex가 더 간단할 수 있습니다.

---

6️⃣ Flex랑 뭐가 달라요?

요즘은 이런 코드도 많이 쓰죠.

display: flex;
justify-content: center;
align-items: center;

차이점을 정리하면 👇

구분	absolute + transform	flex
기준	위치 기반	레이아웃 기반
정확도	픽셀 단위 정확	흐름에 따라
사용처	팝업, 오버레이	일반 정렬

👉 “위치가 중요하면 absolute”
👉 “레이아웃이면 flex”
이렇게 기억하시면 편합니다.

---

마무리 정리 ✨

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

이 조합은
✔ 중앙 정렬의 원리를 이해하기 좋고
✔ 지금도 실무에서 자주 쓰이는 안정적인 방법입니다.

“외우는 코드”가 아니라
왜 이렇게 되는지 이해하고 쓰면
CSS가 훨씬 덜 헷갈리게 느껴지실 거예요 😊