[CSS] div를 가운데 정렬하는 N가지 방법 총정리

by

“어떻게 div를 가운데 정렬하나요?”

이 질문은 CSS를 배우는 과정에서 누구나 한 번쯤은 검색해 봤을, 개발자 커뮤니티의 전설적인 밈(meme)이자 실제적인 난관입니다. 과거에는 이를 위해 복잡한 트릭을 사용해야 했지만, 현대 CSS(Flexbox, Grid)의 등장으로 이 과정은 놀랍도록 간단해졌습니다.

이번 시간에는 상황에 따라 가장 적합한 중앙 정렬 방법을 선택할 수 있도록, 고전적인 방법부터 가장 추천하는 최신 방법까지 모든 것을 총정리해 보겠습니다.

1. 수평 중앙 정렬 (좌우 가운데)

먼저 좌우, 즉 수평으로만 정렬하는 간단한 경우부터 살펴보겠습니다.

Case 1: 텍스트나 인라인(inline) 요소 정렬

글자나 <span>, <a>, <img> 같은 인라인 요소를 감싸고 있는 부모 블록 요소에 text-align: center;를 적용하는 것이 가장 간단한 방법입니다.

<div class="parent-box">
  <span>가운데 정렬될 텍스트입니다.</span>
</div>

.parent-box {
  text-align: center; /* 자식인 인라인 요소를 수평 중앙 정렬 */
  border: 1px solid gray;
}

Case 2: 너비(width)가 정해진 블록(block) 요소 정렬

<div>와 같은 블록 요소를 수평 중앙 정렬하는 가장 고전적이고 유명한 방법입니다. 너비 값이 반드시 지정되어 있어야 하며, margin의 좌우 값을 auto로 설정하면 됩니다.

<div class="block-element">
  이 블록은 수평 중앙에 위치합니다.
</div>

.block-element {
  display: block; /* 기본값이므로 생략 가능 */
  width: 300px; /* 너비가 반드시 있어야 함 */
  margin: 0 auto; /* 위아래 마진 0, 좌우 마진은 자동으로 균등 분배 */
  background-color: lightblue;
}

2. 수평 & 수직 중앙 정렬 (정가운데)

가장 까다롭지만, 이제는 가장 쉬워진 수평과 수직 모두를 아우르는 ‘완벽한’ 중앙 정렬 방법입니다.

Case 3: Flexbox 사용 (가장 추천하는 현대적인 방법) ⭐

Flexbox는 현재 중앙 정렬을 위한 가장 표준적이고 유연한 해결책입니다. 정렬하려는 요소의 부모 요소를 Flex 컨테이너로 만들면 모든 것이 해결됩니다.

<div class="flex-parent">
  <div class="child">Flexbox로 정가운데!</div>
</div>

.flex-parent {
  display: flex;
  justify-content: center; /* 주축(가로) 방향 중앙 정렬 */
  align-items: center;    /* 교차축(세로) 방향 중앙 정렬 */
  
  /* 시각적 확인을 위한 스타일 */
  height: 300px;
  background-color: #f0f0f0;
}

.child {
  background-color: dodgerblue;
  color: white;
  padding: 20px;
}

justify-content와 align-items 단 두 줄이면 완벽한 중앙 정렬이 가능합니다.

Case 4: Grid 사용 (가장 간결한 방법)

부모 요소를 Grid 컨테이너로 만들면 단 한 줄의 코드로 중앙 정렬을 끝낼 수 있습니다.

<div class="grid-parent">
  <div class="child">Grid로 정가운데!</div>
</div>

.grid-parent {
  display: grid;
  place-items: center; /* 수평, 수직 중앙 정렬을 한 번에! */
  
  height: 300px;
  background-color: #f0f0f0;
}

place-items: center;는 align-items: center;와 justify-items: center;를 합친 단축 속성으로, Grid에서는 가장 간결한 정렬 방법입니다.

Case 5: position과 transform 사용 (고전적인 트릭)

Flexbox나 Grid를 사용하기 어려운 상황에서 유용한 고전적인 방법입니다. 부모 요소에 position: relative, **자식 요소에 position: absolute**를 주는 것이 핵심입니다.

<div class="relative-parent">
  <div class="absolute-child">Position으로 정가운데!</div>
</div>

.relative-parent {
  position: relative; /* 자식의 기준점이 됨 */
  height: 300px;
  background-color: #f0f0f0;
}
.absolute-child {
  position: absolute;
  top: 50%;  /* 부모 높이의 50%만큼 아래로 이동 */
  left: 50%; /* 부모 너비의 50%만큼 오른쪽으로 이동 */
  transform: translate(-50%, -50%); /* 자기 자신 크기의 50%만큼 위로, 왼쪽으로 이동 */
}

이 방법은 자식 요소의 왼쪽 상단 꼭짓점을 부모의 정중앙으로 옮긴 뒤(top: 50%, left: 50%), transform을 이용해 자식 요소 자체 크기의 절반만큼을 다시 왼쪽과 위로 당겨와 완벽한 중앙을 맞추는 원리입니다.

요약 및 정리

복잡해 보였던 중앙 정렬, 이제는 상황에 맞게 자신 있게 사용할 수 있습니다.

상황해결 방법핵심
텍스트/인라인 요소 수평 정렬text-align: center; (부모에게 적용)간단한 텍스트 정렬에 사용
블록 요소 수평 정렬margin: 0 auto; (자신에게 적용)너비(width)가 지정되어야 함
완벽한 중앙 정렬 (최신 방법 ①)display: flex; (부모에게 적용) + justify-content & align-items가장 표준적이고 강력한 방법 ⭐
완벽한 중앙 정렬 (최신 방법 ②)display: grid; (부모에게 적용) + place-items: center;가장 간결한 코드
완벽한 중앙 정렬 (고전적인 방법)position + transform부모-자식 간의 relative–absolute 관계가 핵심

결론적으로, 특별한 이유가 없다면 Flexbox를 사용하여 중앙 정렬하는 것이 가장 좋습니다. 코드가 직관적이고, 추가적인 정렬이나 배치에도 유연하게 대처할 수 있기 때문입니다.