CSS 가운데 정렬 완전 정복: flex·grid·margin auto

"이걸 어떻게 가운데에 두지?"는 프론트엔드의 영원한 질문입니다. 상황별로 가장 깔끔한 방법을 정리합니다.

1) flex로 수평+수직 한 번에

가장 자주 쓰는 만능 패턴입니다.

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

justify-content는 주축, align-items는 교차축이라는 점만 기억하면 됩니다. flex-direction: column이면 두 축의 의미가 뒤바뀝니다.

2) grid는 더 짧다

.parent {
  display: grid;
  place-items: center; /* 가로·세로 동시에 가운데 */
  min-height: 300px;
}

place-items: center 한 줄이면 끝입니다. 단일 요소를 정중앙에 둘 때 가장 간결합니다.

3) 블록 요소 수평 가운데: margin auto

너비가 정해진 블록 요소라면 고전적인 방법이 여전히 최고입니다.

.box {
  width: 600px;
  max-width: 100%;
  margin: 0 auto; /* 좌우 자동 → 수평 가운데 */
}

단, margin: auto는 수직 가운데엔 (일반 흐름에서) 동작하지 않습니다. 수직까지 필요하면 flex/grid를 쓰세요.

4) 텍스트와 인라인 요소

.title {
  text-align: center;  /* 인라인/텍스트 가로 가운데 */
  line-height: 48px;   /* 한 줄 텍스트의 세로 가운데(높이=line-height) */
}

상황별 빠른 선택

상황	방법
자식 하나를 정중앙	place-items: center (grid)
여러 자식 가운데 정렬	flex + justify/align: center
너비 있는 블록 수평만	margin: 0 auto
텍스트만	text-align: center

마무리 체크리스트

• 정중앙 한 방엔 grid place-items: center
• 여러 자식·방향 제어는 flex
• 블록 수평만이면 margin: 0 auto
• 축이 헷갈리면 flex-direction을 먼저 확인

가운데 정렬은 "무엇을, 어느 축으로"만 분명히 하면 한 줄로 끝납니다.