CSS로 요소 가운데 정렬하기: 수평·수직 중앙 정렬 완벽 가이드

CSS로 요소를 가운데 정렬하는 일은 생각보다 훨씬 어려워 보입니다. 특히 수평과 수직을 동시에 정렬해야 할 때 더욱 그렇죠. 이번 글에서는 최신 CSS 기법과 함께 약간 구식이지만 여전히 유용한 기법까지 모두 소개하겠습니다.

텍스트 요소 수평 가운데 정렬

텍스트를 수평으로 가운데 정렬하는 것은 아주 간단합니다. text-align 속성에 center 값을 지정하면 됩니다.

h1 {
  text-align: center;
}

위 코드는 모든 텍스트 요소에 적용됩니다.

블록 요소(텍스트 외) 수평 가운데 정렬

텍스트가 아닌 요소를 수평으로 가운데 정렬하려면 margin 속성의 좌우 값을 auto로 설정하면 됩니다. 이때 요소의 너비 값도 반드시 지정해야 합니다.

.center-horizontal {
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* 또는 max-content */
}

참고: 정렬할 요소에 고정된 너비를 지정하고 싶지 않다면 width: max-content를 사용하세요. 그러면 요소가 콘텐츠 크기만큼 자동으로 확장됩니다.

블록 요소 vs 인라인 블록 요소

앞서 만든 .center-horizontal 클래스는 블록(block) 요소는 가운데 정렬할 수 있지만, 인라인(inline) 요소에는 적용되지 않습니다. HTML에는 기본적으로 인라인 요소인 태그들이 있는데, 예를 들어 <button> 요소는 기본적으로 display: inline-block 스타일을 가집니다. 하지만 CSS 클래스에 display: block만 추가하면 손쉽게 블록 요소로 바꿀 수 있습니다.

.center-horizontal {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* 또는 max-content */
}

이제 어떤 요소에든 적용할 수 있습니다.

Flexbox로 수평 가운데 정렬

최신 Flexbox 속성을 사용하면 수평 가운데 정렬은 놀랍도록 간단합니다. 기존 .center-horizontal 클래스를 다음과 같이 바꿔보세요.

.center-horizontal {
  display: flex;
  justify-content: center;
}

보시다시피 <div> 요소는 잘 가운데 정렬됩니다. 그런데 이상하게도 버튼 요소는 정렬되지 않죠. 무슨 이유일까요?

<button> 요소는 특수한 요소로, <div>와 달리 소위 플렉스 컨테이너(flex container) 역할을 할 수 없기 때문입니다.

하지만 버튼은 플렉스 아이템(flex item)이 될 수 있습니다. 즉, 버튼을 플렉스 컨테이너 안에 넣으면 가운데 정렬이 가능합니다. 에디터에 다음 HTML을 추가해 보세요.

<div class="center-horizontal">
  <button>Center me</button>
</div>

이제 정상적으로 작동합니다! 버튼 요소에서 center 클래스를 제거하고, 감싸고 있는 부모 <div> 컨테이너에 클래스를 적용했을 뿐입니다.

팁: <img> 요소 역시 플렉스 컨테이너가 될 수는 없지만, 버튼처럼 플렉스 아이템은 될 수 있습니다.

요소 수직 가운데 정렬

CSS 초보자들이 가장 어려워하는 것이 바로 수직 가운데 정렬입니다. Flexbox를 사용하면 간단하지만, 먼저 구식 CSS 방법으로 어떻게 처리하는지 살펴보겠습니다.

margin-top과 margin-bottom을 auto로 설정하면 될 것 같지만, 안타깝게도 그렇지 않습니다.

또한 수직 가운데 정렬이 작동하려면 높이가 지정된 부모 컨테이너가 필요합니다. 에디터에 다음 HTML을 추가하세요.

<section class="section">
  <div class="center-vertical">Center me vertically</div>
</section>

부모인 section 클래스에 다음 CSS를 추가합니다.

.section {
  height: 200px;
  border: 1px solid black;
}

테두리(border)는 결과물을 한눈에 파악하기 쉽도록 추가한 것일 뿐입니다.

이제 자식 요소에 다음 CSS를 추가합니다.

.center-vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

완성입니다!

Flexbox로 수직 가운데 정렬

Flexbox로 수직 가운데 정렬을 하려면 부모 플렉스 컨테이너가 필요합니다. 이전 예제에서 자식 요소의 center-vertical 클래스는 제거하세요. 그리고 .section 클래스에 두 개의 Flexbox 속성을 추가합니다.

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
}

이제 자식 요소가 Flexbox 덕분에 수직으로 가운데 정렬됩니다.

수직·수평 동시 가운데 정렬

수직과 수평을 동시에 가운데 정렬하려면 몇 가지 속성만 추가하면 됩니다. 먼저 구식 CSS 방법부터 시작해 보겠습니다. 다음 마크업을 추가하세요.

<section class="section">
  <div class="center-vertical-and-horizontal">
    Center me vertically &amp; horizontally
  </div>
</section>

그리고 CSS입니다.

.section {
  height: 200px;
  border: 1px solid black;
}

.center-vertical-and-horizontal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}

보시다시피 앞서 살펴본 "Flexbox 없이 수직 가운데 정렬" 예제와 매우 유사합니다. 여기서는 left: 50% 선언을 추가하고, transform 속성에 X축과 Y축 값을 한 번에 지정했습니다: (-50%, -50%). 첫 번째 값이 X, 두 번째 값이 Y입니다.

Flexbox로 수직·수평 동시 가운데 정렬

마지막으로 같은 작업을 Flexbox로 해보겠습니다. 자식 요소의 center-vertical-and-horizontal 클래스는 제거하고, .section 클래스에 다음 CSS를 사용하세요.

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

앞선 수직 정렬 예제와 유일한 차이점은 justify-content: center 선언 하나입니다. 이 속성이 수평 가운데 정렬을 담당합니다.

CSS Grid로 수평·수직 가운데 정렬

마무리로 더욱 현대적인 CSS Grid 속성으로 수직·수평 가운데 정렬을 처리하는 방법을 살펴보겠습니다. .section 클래스를 다음과 같이 바꿔보세요.

.section {
  height: 200px;
  border: 1px solid black;
  display: grid;
  place-items: center;
}

단 두 개의 속성(display: grid와 place-items: center)만으로 작업이 끝납니다. 정말 편리하죠!

아쉽게도 CSS Grid는 아직 모든 최신 브라우저와 완벽하게 호환되지 않으며, WordPress 같은 인기 CMS나 프레임워크에서도 100% 작동하지 않습니다.

CSS Grid의 현재 브라우저 호환성 현황은 caniuse.com에서 확인할 수 있습니다.