한 줄 정답 — 가로만 필요하면 블록 요소엔 margin: 0 auto(너비 지정 필수), 글자·인라인 요소엔 text-align: center. 가로·세로를 한 번에 맞추려면 부모에 display: flex; justify-content: center; align-items: center를 주고, 부모에 높이를 확보하면 된다.

핵심 요약#

  • 가로 가운데: 블록은 margin: 0 auto, 인라인·텍스트는 text-align: center.
  • 세로 가운데: 부모를 flex로 만들고 align-items: center. 단, 부모에 높이가 있어야 보인다.
  • 가로·세로 동시: flex의 justify-content: center + align-items: center, 또는 grid의 place-items: center.
  • 가운데 정렬이 "안 되는" 대부분의 이유는 대상이 블록인데 text-align을 썼거나, 부모에 높이가 없어서다.

CSS 가운데 정렬, 먼저 두 가지를 구분하자#

가운데 정렬이 헷갈리는 건 방법이 많아서가 아니라, 무엇을 가운데 두려는지를 안 나눠서다. 두 가지만 구분하면 정리된다.

  • 인라인/텍스트(글자, span, 이미지 같은 inline 요소): 부모에 text-align: center.
  • 블록 요소(div 등 한 줄을 통째로 차지하는 요소): margin: 0 auto 또는 부모를 flex로.

text-align은 "줄 안에 흐르는 내용"을 정렬하는 속성이다. 그래서 블록 div에는 먹지 않는다. 박스 자체를 옮기는 건 margin이나 레이아웃(flex/grid)의 몫이다.

가로 가운데 정렬#

텍스트·인라인 요소: text-align#

.box {
  text-align: center; /* 부모에 주면 안쪽 글자/인라인이 가운데로 */
}

버튼이나 글자처럼 줄 안에 흐르는 내용은 이걸로 충분하다. 이미지는 기본이 inline이라 부모의 text-align: center로 가운데 온다.

블록 요소: margin auto#

.card {
  width: 320px;     /* 너비가 있어야 양옆 auto가 공간을 나눠 가진다 */
  margin: 0 auto;   /* 위아래 0, 좌우 auto */
}

블록 요소는 기본적으로 부모 너비를 꽉 채우기 때문에, 너비를 지정하지 않으면 margin: auto는 가운데로 가지 않는다. 가운데로 안 온다면 십중팔구 너비가 빠진 것이다.

세로 가운데 정렬#

세로 정렬은 flex가 가장 깔끔하다.

.parent {
  display: flex;
  align-items: center; /* 교차축(세로) 가운데 */
  min-height: 240px;   /* 높이가 있어야 '가운데'가 의미를 갖는다 */
}

여기서 가장 흔한 함정은 높이다. 부모 높이가 내용만큼이면(=내용에 딱 붙으면) 위아래 여백이 없어 가운데로 보이지 않는다. min-height나 명시적 height로 공간을 먼저 확보하자.

가로·세로 동시에#

flex#

.parent {
  display: flex;
  justify-content: center; /* 주축(가로) 가운데 */
  align-items: center;     /* 교차축(세로) 가운데 */
  min-height: 320px;
}

flex-direction이 기본값(row)일 때 justify-content가 가로, align-items가 세로다. 방향을 column으로 바꾸면 이 둘의 축도 바뀌니, "가로/세로"가 아니라 "주축/교차축"으로 기억하는 편이 안전하다.

grid#

.parent {
  display: grid;
  place-items: center; /* justify-items + align-items 한 번에 */
  min-height: 320px;
}

자식이 하나뿐이고 완전 가운데만 필요하면 place-items: center 한 줄이 가장 짧다.

단계별로 따라하기#

가운데에 카드 하나를 띄우는 가장 흔한 패턴이다.

<div class="stage">
  <div class="card">가운데 정렬</div>
</div>

.stage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;          /* 화면 높이의 60% 확보 */
  background: #010828;
}

.card {
  padding: 24px 32px;
  border-radius: 16px;
  background: #85d633;
  color: #010828;
}

저장하고 브라우저로 열면, 어두운 무대 한가운데에 연두색 카드가 가로·세로 모두 가운데에 떠 있는 화면을 볼 수 있다.

흔한 실패 3가지#

1. 블록 div에 text-align을 줬다#

text-align: center는 박스 안의 인라인 내용만 옮긴다. 박스 자체는 그대로다. 박스를 옮기려면 margin: 0 auto(너비 필요)나 부모 flex를 쓴다.

2. margin auto인데 너비가 없다#

/* (이 코드는 가운데로 가지 않습니다) */
.card { margin: 0 auto; }

너비가 없으면 블록이 부모를 꽉 채워서 좌우 여백이 0이다. width(또는 max-width)를 주면 해결된다.

3. 세로 정렬인데 부모 높이가 없다#

align-items: center를 줬는데 그대로라면, 부모 높이가 내용 높이와 같아서다. min-height로 공간을 먼저 만든 뒤 정렬하자.

자주 묻는 질문#

Q. flex로 가운데 정렬했는데 세로로만 안 맞아요. 왜인가요?

A. 부모에 높이가 없을 가능성이 큽니다. align-items: center는 남는 세로 공간을 나눠 정렬하는데, 높이가 내용에 딱 맞으면 남는 공간이 없습니다. min-height를 먼저 주세요.

Q. position: absolute로 띄운 요소는 어떻게 가운데 두나요?

A. top: 50%; left: 50%; transform: translate(-50%, -50%)가 정석입니다. 위치 기준이 되는 부모에는 position: relative가 있어야 합니다. 자세한 좌표 기준은 아래 position 글에서 다룹니다.

관련 글#

가운데 정렬은 결국 "박스를 어떻게 배치하는가"의 문제다. 배치의 토대가 되는 개념을 더 보면 응용이 쉬워진다.

더 알아보기#