CSS. 중앙 정렬 방법 정리

CSS 중앙 정렬은 무엇을 정렬하는지에 따라 적절한 방법이 달라집니다.

1. Grid를 이용한 가로·세로 중앙 정렬

자식 요소 하나를 가로와 세로 중앙에 배치할 때 가장 간결한 방법입니다.

.container {
  display: grid;
  place-items: center;
  min-height: 200px;
}

<div class="container">
  <div>중앙에 정렬됨</div>
</div>

place-items: center는 다음 두 속성을 한 번에 지정합니다.

align-items: center;
justify-items: center;

단일 요소를 중앙에 배치하는 경우 Grid 방식이 간결하고 읽기 쉽습니다.

2. Flex를 이용한 가로·세로 중앙 정렬

여러 요소를 한 방향으로 배치하거나 정렬해야 할 때 적합합니다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

<div class="container">
  <div>중앙에 정렬됨</div>
</div>

• justify-content: center: 주축 방향 중앙 정렬
• align-items: center: 교차축 방향 중앙 정렬

기본값인 flex-direction: row에서는 각각 가로와 세로 중앙 정렬에 해당합니다.

세로 중앙 정렬이 눈에 보이려면 부모 요소에 충분한 높이가 있어야 합니다.

3. Flex 또는 Grid 내부에서 margin: auto 사용

부모가 Flex 또는 Grid 컨테이너라면 자식 요소에 margin: auto를 적용하여 중앙에 배치할 수도 있습니다.

.container {
  display: flex;
  min-height: 200px;
}

.item {
  margin: auto;
}

이 방식은 단일 자식 요소를 간단히 중앙에 배치할 때 사용할 수 있습니다.

4. margin: 0 auto를 이용한 가로 중앙 정렬

블록 요소 자체를 가로 중앙에 배치할 때 사용합니다.

.box {
  width: 500px;
  margin: 0 auto;
}

margin: 0 auto는 다음과 같은 의미입니다.

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

좌우의 남는 공간이 동일하게 배분되면서 요소가 부모 안에서 가로 중앙에 놓입니다.

다음 조건이 필요합니다.

• 요소의 너비가 부모 요소보다 작아야 합니다.
• 일반적으로 블록 요소에 사용합니다.
• 세로 중앙 정렬에는 사용할 수 없습니다.
• 요소 내부의 텍스트를 정렬하는 방법은 아닙니다.

반응형 레이아웃에서는 다음과 같이 사용할 수 있습니다.

.box {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

margin-inline: auto는 좌우 방향을 논리 속성으로 표현한 방식으로, 다국어 레이아웃에도 적합합니다.

5. 텍스트 중앙 정렬

요소 내부의 텍스트나 인라인 콘텐츠를 중앙에 정렬하려면 text-align을 사용합니다.

.container {
  text-align: center;
}

text-align: center는 요소 자체가 아니라 요소 안의 텍스트와 인라인 콘텐츠를 정렬합니다.

용도별 추천

목적	권장 방법
단일 요소의 가로·세로 중앙 정렬	display: grid; place-items: center;
여러 요소의 정렬과 배치	Flex
Flex 또는 Grid 내부의 단일 요소 중앙 정렬	margin: auto;
블록 요소 자체의 가로 중앙 정렬	margin-inline: auto;
텍스트 중앙 정렬	text-align: center;

결론

단일 요소를 중앙에 배치할 때는 다음 방법이 가장 간결합니다.

.container {
  display: grid;
  place-items: center;
}

여러 요소의 방향과 간격을 함께 제어해야 한다면 Flex를 사용하고, 일반 블록 요소 자체를 가로 중앙에 배치할 때는 margin-inline: auto를 사용하는 것이 적절합니다.