최고의 CSS 중앙정렬 기법

() translation by (you can also view the original English article)

크리스 코이어(Chris Coyer)는 최근에 자신의 사이트인 CSS Tricks에 올린 상황별 CSS 중앙정렬 방법을 정리한 글을 통해 CSS를 이용해 뭔가를 가로 및 세로로 중앙정렬하는 방법이 너무나도 많다는 사실을 보여줬습니다. 각 중앙정렬 방법은 모두 저마다 주의할 점이 있지만 그러한 방법들을 조합하면 IE8 및 이후 버전에서도 일관되게 크로스 브라우징을 지원하는 막강한 중앙정렬 기법을 만들어낼 수 있습니다.

이제 본격적으로 어떻게 하는지 살펴보겠습니다.

블록 만들기

응답형 웹사이트를 제작하고 있다면 대부분 요소의 크기를 퍼센트로 지정할 것이며, 여기서는 임의의 .container 요소를 만듭니다.

1	<div class="container">
2	...
3	</div>

.container {
  width: 70%;
  height: 70%;
  margin: 40px auto;
  background: red;
}

컨테이너 요소가 적절히 늘려질 수 있도록 html, body { width: 100%; height: 100%; }로 지정합니다.

테이블로 바꾸기

이제 .container 안에서 자주 사용되는 테이블 패턴을 이용해 수직 중앙정렬을 하겠습니다. 이렇게 하려면 일반 블록 레벨 요소가 필요하고, 그것들이 테이블 셀처럼 동작하게 만들면 수직 중앙정렬이 가능해집니다.

<div class="container">
  <div class="outer">
    <div class="inner">
      ...
    </div>
  </div>
</div>

.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

끝으로 수평 중앙정렬된 요소를 추가합니다.

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

.centered {
  position: relative;
  display: inline-block;

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}

이 안에는 높이가 동적으로 변하는 텍스트 블록이나 절대 위치가 지정된 요소를 비롯해 여러분이 원하는 어떤 것이든 배치할 수 있습니다.

수정사항 적용

요소의 수평 중앙정렬을 변경하려면 .inner의 text-align 프로퍼티만 수정하면 됩니다. 수직 중앙정렬을 변경하려면 .inner의 vertical-align 프로퍼티를 수정하면 됩니다.

결론

이 예제는 마크업할 게 많아 보일 수도 있지만 실제로 동작하는 부분은 세 개의 div인 .outer, .inner, .centered밖에 없습니다. 그리고 이 세 요소에 스타일을 적용하는 것은 일관성을 띠고 있어서 여러 프로젝트에서 사용하는 기본 CSS에 이 기법을 적용하고 다시는 이 부분에 신경 쓰지 않아도 됩니다.

이 기법은 대부분의 중앙정렬 기법보다 요소를 하나 더 사용하지만 아주 견고한 기법입니다. 이 기법이 표준 중앙정렬 기법으로 자리 잡아 CSS에서 중앙정렬하는 것에 관해 더는 걱정하지 않아도 된다면 좋겠습니다.