최고의 CSS 중앙정렬 기법

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

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

블록 만들기

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

1 2 3

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

1 2 3 4 5 6

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

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

테이블로 바꾸기

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

1 2 3 4 5 6 7

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

01 02 03 04 05 06 07 08 09 10

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

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

1 2 3 4 5 6 7 8 9

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

1 2 3 4 5 6 7 8 9

.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에서 중앙정렬하는 것에 관해 더는 걱정하지 않아도 된다면 좋겠습니다.

출처 : http://webdesign.tutsplus.com/ko/tutorials/the-holy-grail-of-css-centering--cms-22114