CSS 가운데(중앙) 정렬

콘텐츠를 가운데 정렬하는 일은 굉장히 빈번한 일입니다. 부모 혹은 자식 요소에 따라 이를 구현하는 방법이 상이하니 염두해 둡시다.

기본적인 내용 정렬

가운데 정렬을 알아보기 앞서, 가장 간단한 정렬방법을 알아봅니다.

내용 가로 정렬

내용을 <p> 같은 종결 블록 요소의 왼쪽, 중앙, 오른쪽, 양쪽에 정렬한다.

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

• 내용이 든 종결 블록 요소에만 적용된다.
• 인라인 요소에 적용되지 않으며, 구조 블록 요소에는 제대로 적용되지 않는다.
• 구조 블록 요소에 text-align 속성을 지정하면 그 속성값은 자식 요소로 상속된다.

내용 세로 정렬

인라인 요소를 부모 요소의 네 폰트라인 중 하나에 맞추려면 vertical-align 속성을 이용한다.

폰트라인은 인라인 내용을 맞출 수 있는 기준 위치 네 군데를 뜻한다. 이 기준 위치에 따라 정렬 콘텍스트라는 것이 형성된다.

가로 중앙 정렬

인라인 요소는 text-align 속성을 이용해서 가운데 정렬이 가능하지만 블럭 요소들은 중앙 정렬되지 않습니다.

고정폭의 블럭 요소 중앙 정렬

auto값은 요소 안의 마진 여백이 왼쪽 마진과 오른쪽 마진 사이에서 대등하게 나눠짐을 의미한다.

p {
  width: 100px; /* 정렬하려는 요소의 넓이를 반드시 지정 */
  margin: 0 auto;
}

Quirks Mode를 대비한 중앙정렬은 아래와 같다.

body {
  text-align: center; /* Quirks Mode 를 위한 가운데 정렬 */
}

p {
  text-align: left; /* 문자들의 가운데 정렬을 해제 */
  width: 100px;
  margin: 0 auto;
}

가변폭의 컨테츠를 중앙 정렬

너비가 고정되어 있지 않는 콘텐츠를 가운데 정렬하는 방법입니다.

ie8 이상, modern-browser를 위한 방법

가운데 정렬이 되는 것은 item 클래스의 요소이다. 인라인 요소도 가능

<style>
  .centered { display: table; margin-left: auto; margin-right: auto; }
</style>

<div class="centered">
  <div class="item">block item</div>
</div>

ie 6~7 호환

가운데 정렬 시킬 대상은 item 클래스의 요소이다. 이 방법은 inline-block을 사용하는데 ie 6~7은 지원이 완벽하지 않아서 원래 inline인 요소에 한해서만 inline-block을 사용할 수 있다. 그래서 span 태그를 사용하여 item클래스의 요소를 감쌌으며 인라인 요소는 블럭요소를 포함할수 없다는 기본 문법에 따라 item클래스의 요소도 인라인 요소로 대체되었다.

<style>
  .centeringContainer { text-align: center; }
  .centered { display: table; margin-left: auto; margin-right: auto; display: inline-block; }
</style>

<div class="centeringContainer">
  <span class="centered">
    <span class="item" style="display:block">block item</span>
  </span>
</div>

centered 클래스에 display 속성이 두 번 사용되었는데, 이 경우 마지막에 쓰여진 display: inline-block이 적용된다. 단, Firefox 2에서는 inline-block을 이해하지 못하므로 그 전에 적힌 display: table이 적용된다. 그래서 inline-block을 지원하지 않는 브라우저는 display: table과 margin을 적용받아 가운데 정렬이 되고, 나머지 브라우저에서는 text-align: center와 display: inline-block이 적용되어 가운데 정렬이 된다.

포지션이 absolute일때 중앙 정렬

• left의 값을 50% 으로 잡기
• margin-left의 값을 정렬하려는 div등의 넓이값/2 나누고 음수(-)값을 입력

ex. div width:400px면 400/2 = 200을 마진값으로 설정 margin-left:-200px

<style>
  .centered { width: 400px; position: absolute; left: 50%; margin-left: -200px; }
</style>

<div class="centered">absolute 가운데 정렬</div>

포지션이 absolute일때 너비가 고정되지 않은 경우

transform 속성을 활용하여 요소의 너비의 절반만큼을 이동시킬 수 있다.

<style>
  .centered { position: absolute; left: 50%; transform: translateX(-50%); }
</style>

<div class="centered">transform 가운데 정렬</div>

transform 속성은 IE9 이상의 IE 브라우저와 그 밖의 모던 브라우저들에서 작동하며, IE9는 prefix인 -ms- 를 필요로한다.

포지션이 absolute일때 중앙 정렬(가로 중앙 정렬 + 세로중앙 정렬)

<style>
  div { position:relative; }
  #cm { position:absolute; }
  .hc { width:200px; left:0; right:0; margin-left:auto; margin-right:auto; } /* 가로 중앙 정렬 */
  .vc { height:40px; top: 0; bottom:0; margin-top:auto; margin-bottom:auto; } /* 세로 중앙 정렬 */
</style>

<div>
  <p id="cm" class="hc vc">가로 중앙 정렬 + 세로 중앙 정렬</div>
</div> 

IE7 이하 버전은 왼쪽 맞추기와 오른쪽 맞추기를 동시에 지원하지 않고 상단 맞추기와 하단 맞추기를 동시에 지원하지 않으므로 이 패턴이 적용되지 않는다.

세로 중앙 정렬

페이지의 높이가 유동적으로 늘어나거나 줄어들기 때문에 요소안의 요소를 세로 중앙 정렬하는 것은 어려운 일입니다. 각각의 상황에 따라 알맞게 사용하기를 바랍니다.

테이블안의 요소 정렬

table { vertical-align: middle; }

div태그의 display속성을 table로 설정하는 방법

테이블처럼 만들어서 테이블의 vertical-align 속성을 사용할 수 있도록 <div>를 몇개 셋팅한다. 이렇게 함으로써 div 태그에 table 속성에 있는 vertical-align 속성을 설정할 수 있다.

<style>
  #wrapper { display: table; }
  #cell { display: table-cell; vertical-align: middle; }
</style>

<div id="wrapper">
  <div id="cell">
    <div class="content">Content goes here</div>
  </div>
</div>

• 높이가 변해도 상관없다(CSS에 높이를 지정하지 않아도 된다).
• wrapper에 공간이 없어도 내용이 잘리지 않는다.
• IE7 이하에서 작동하지 않는다.
• 태그 단계가 깊어진다(그렇게 나쁜 건 아니다. 이건 주관적인 부분이다).

한 줄에 여러 요소를 넣어야 할 때는 display: table 대신 display: inline-table을 사용할 수도 있다.

absolute 속성을 이용하는 방법

이번에는 absolute 속성을 이용하여 top 속성에 50%를 주어 콘텐츠를 내리고 margin을 이용하여 콘텐츠 높이의 절반을 margin-top:-120px;이와같이 음수값을 이용한다. 그럼으로써 높이를 고정시킬 수 있다. 이것은 요소의 높이를 CSS에서 지정해야 한다는 걸 의미한다.

<style>
  #content { position: absolute; top: 50%; height: 240px; margin-top: -120px; }
</style>

<div id="content">Content Here</div>

높이를 지정해 두기 때문에, 내용이 넘치면 div 밖으로 튀어나간다. 대신에 스크롤바가 생기도록 콘텐츠 div에 overflow: auto를 주고 싶을 것이다.

• 모든 브라우저에서 작동한다.
• 태그가 깊이 들어가지 않는다.
• 충분한 공간이 없으면 내용이 잘린다(div가 body 밑에 있고, 사용자가 브라우저 창을 줄이면, 스크롤바가 나타나지 않는다).

포지션이 absolute일때 높이가 고정되지 않은 경우

transform 속성을 활용하여 요소의 높이의 절반만큼을 이동시킬 수 있다.

<style>
  .centered { position: absolute; top: 50%; transform: translateY(-50%); }
</style>

<div class="centered">transform 세로 가운데 정렬</div>

float 속성을 이용하는 방법

이 방법은 내용 요소 위에 div를 두는 방법이다. 이 div는 height: 50%;, margin-bottom:-content높이의절반 이렇게 설정한다. content엔 clear 속성을 줘서 float된 div 밑으로 오게 하면 content가 가운데 오게 된다.

<style>
  #floater {float:left; height:50%; margin-bottom:-120px;}
  #content  {clear:both; height:240px; position:relative;}
</style>

<div id="floater"></div>
<div id="content">
  Content Here    
</div>

• 모든 브라우저에서 작동한다.
• 충분한 공간이 없을 때 (예컨대 윈도우 사이즈를 줄일 때) 콘텐츠가 잘리고 스크롤바가 나타난다.
• 내가 생각할 수 있는 유일한 단점은, 빈 요소가 사용된다는 점이다(그렇게 나쁜 건 아니다. 이것 역시 주관적인 부분이다).

line-height 속성을 이용하는 방법

이 방법은 박스 안의 텍스트가 한 줄일 경우에만 유효하다. 박스의 높이값과 line-height를 동일하게 부여한다.

<style>
  #content { height: 100px; line-height: 100px; }
</style>

<div id="content">Content Here</div>

• 모든 브라우저에서 작동한다.
• 공간이 없어도 잘리지 않는다.
• 오직 텍스트에서만 작동한다(블럭 요소에선 작동하지 않는다).
• 한 줄 이상이 되면 (즉, 두 줄이 되면), 보기 싫게 깨진다.

이미지를 가운데 정렬 시키는 방법

이번 예제는 ie에서도 적용되는 예제이다.

<style>
  .vCenter { display: table; width: 400px; height: 400px; border: 1px solid red; }
   .vCenter span { display: table-cell; text-align: center; vertical-align: middle; }
</style>

<!--[if lt IE 8]>
<style>
  .vCenter { position:relative; }
  .vCenter span { display:inline-block; position:absolute; top:50%; left:50%; }
  .vCenter span a { position:relative; top:-50%; left:-50%; }
</style>
<![endif]-->

<div class="vCenter">
  <span>
    <a href="#">
      <img src="thumbnails.jpeg" alt="이미지">
    </a>
  </span>
</div>

타인의 소스를 분석하다 발견한 새로운 가로 및 세로 중앙 정렬 방법을 설명한다. 업데이트 2015-06-27

:before 를 이용한 가운데 정렬

가상선택자인 :before를 정렬할 요소의 부모에 컨테이너에 추가해 그것의 높이를 100%로 지정하고 그것의 세로 정렬의 값을 middle로 설정해 이후 등장하는 요소가 세로 중앙정렬 되도록 하는 것이다.

<style>
  .wrapper {height: 100%; text-align: center;}
  .wrapper:before { content: ""; display: inline-block; width: 1px; height: 100%; margin-right: 0; vertical-align: middle;}
  .content { display: inline-block; }
</style>

<div class="wrapper">
  <div class="content">콘텐츠</div>
</div>

정확한 가운데 정렬이 아니라 추가 수정이 필요하다.

참고문헌 및 관련링크.

1. http://mytory.net/archives/9727