본문으로 바로가기

CSS 가운데(중앙) 정렬

category 웹코딩/CSS 2015.04.15 04:43

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

기본적인 내용 정렬

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

내용 가로 정렬

내용을 <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. BlogIcon redyong 2013.06.27 12:19 신고

    감사합니다. 좋은 정보 잘 보고 갑니다 ^^ 많은 도움이 되었네요~

  2. BlogIcon 현자 2014.02.12 15:48 신고

    잘 보고 갑니다. 자주 사용안 하니 할때마다 찾으러 오네요 ㅠㅠ

  3. BlogIcon 아둔한사 2014.06.11 21:06 신고

    잘 보고 갑니다. 블로르가 아주 아름답습니다...

    저거 소스...저런식으로 보이는 것은 어떤 플러그인인가요 .

    제거랑 너무 틀리네요 ㅠㅠ 아름답습니다. ..하아.ㅠ

    • BlogIcon 늘비오는거리 2014.06.12 15:53 신고

      안녕하세요^^
      블로그에 보니 이미 syntaxhighlighter는 적용해 두셨네요. 저도 수정한지 오래되서 기억이 가물가물한데, 사용하시는 syntaxhighlighter 의 테마 CSS나 기본 테마 CSS를 수정해서 색상 정도는 수정이 가능합니다. 행번호 등은 옵션으로 지정했던 것 같고요.

  4. BlogIcon 예쁜꽃이피었으면 2014.09.23 11:30 신고

    안녕하세요~
    도움이 많이 되었습니다. 감사합니다.
    담아갈게요~~~

  5. BlogIcon COCO Media 2016.02.07 01:04 신고

    CCS로 정렬하는법 잘배웠습니다^^!! 궁금한점이 있습니다

    html로 <center>만으로도 클래스들이 가운데 정렬이 될 때도 있던데 center사용은 하면 안되나요?!!

    뭔가 코드 미관상 안좋아 보이는 부분?인가요!
    ies6~7 호환 하면 까지 정렬하면 코드가 길어지는 것 같던데 센터를 사용하면 짧게 되는 것 같아서요
    음 개발자들간의 규칙 같은건가요? ㅠ_

    • BlogIcon 흉내쟁이 2016.02.07 01:18 신고

      과거에 스타일링이 가능한 태그들이 일부 있었습니다. 말씀하신 것 이외에도 여럿 있었죠.

      그것들은 웹이 표준화를 지키는 시점에서 모두 사라진 태그들입니다. 일부 태그들은 명맥을 유지했지만 스타일링과 관련된 태그틀은 전부 표준화에서 제외되었고 살아남은 태그들은 의미와 기능이 변경되었습니다.

      현재에도 브라우저에서 이를 지원하기도 하지만 당장 내일이라도 해당 태그들을 지원하지 않기로 해도 뭐라 할 수 없는 부분입니다. 이미 표준에서 제외되었고 극히 소수의 사람들만 사용하니까요.

      관련 태그들을 알고 계시다면 십년도 더된 오래전 문서를 접하셨거나 그때 태그를 배우셨을 겁니다.

      현재에는 마크업과 스타일링, 기능을 각각 구분하여 html, css, JS 를 분리하여 작성하는 것이 보편화되었습니다.

      저도 2004년 경까진 언급하신 태그들을 사용하곤 했습니다만 이후 CSS로의 전환의 물결을 탓었습니다.

    • BlogIcon COCO Media 2016.02.07 01:45 신고

      넵! 감사합니다. 웹표준과 관련이 있었네요. center도 어릴때부터 자주사용했고 블로그스킨꾸미거나 광고도 정렬하기 힘들어서 center로 정렬을 많이 했는데 지금부터라도 하나씩! CSS로 전환을 해보겠습니다!!

  6. 인삼향기 2016.03.23 09:48 신고

    웹회사가 아니다보니 e카달로그 작업하면서 기능면에서 많이 떨어졌는데 여기서많은도움이 되었네요 감사합니담^^

  7. WEB!! 2016.07.29 16:31 신고

    너무너무 잘 보고 갑니다 !!!

  8. jinook 2017.05.24 16:37 신고

    일주일 동안 찾아헤맨 난제를 해결 감사합니다..!

  9. 궁금타 2017.05.30 08:18 신고

    패풋스킨을 쓰고있는데요. secondnav(상단바)를 가운데로 이동시키고 싶은데 css에다가 어떻게 코드를 입력해야하나요??

  10. BlogIcon 아크 2017.06.01 11:04 신고

    좋은정보 감사합니다.
    출처남기고 퍼가요~

  11. 2017.06.20 15:31

    비밀댓글입니다

  12. 킼킼 2017.07.13 16:19 신고

    감사합니다!!찾고있던거였어요

티스토리 툴바