현재 페이지 위치

Home> 광장> 널리 블로그> 상세보기

목록이전 글 보기253/370다음 글 보기

추천하기
추천 횟수 :4
조회수
73,994
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

Layer 화면 중앙정렬 방법

UI 개발

안녕하세요. UI개발실 김태형입니다.

마크업 작업을 하다보면 div layer를 화면 정중앙에 정렬해야 하는경우가 많이 있습니다.
layer 사이즈가 고정이면 간단히 표현할수 있지만 가변형일 경우에는 매번 어떤식으로 표현을 할까 생각하곤 합니다.

그래서 어떤 경우의 수들이 있는지 한번 정리를 해보았습니다.


1. position:absolute와 margin 마이너스값을 이용한 중앙 정렬

  • 장점 : ie7 이상 모든 브라우저에서 지원 가능합니다.
  • 단점 : width와 height값이 고정사이즈인 상태에서만 사용할 수 있습니다.
<div class="layer">Layer Contents</div>
.layer{
  position:absolute;
  top:50%;
  left:50%;
  width:100px;
  height:100px;
  background:#f00;
  margin:-50px 0 0 -50px;
}

2. position:absolute와 inline-block을 이용한 중앙 정렬

  • 장점
    • ie7 이상 모든 브라우저에서 지원 가능합니다.
    • layer 안의 content 영역이 고정값이 아니라 가변이어도 자동으로 중앙정렬이 됩니다.
  • 단점
    • 불필요한 span 태그가 하나더 필요합니다. (모바일에선 :after로 대체 가능)
<div class="layer">
  <span class="content">Layer Contents</span>
  <span class="blank"></span>
</div>
.layer{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}
.layer .content{display:inline-block;background:#f00;vertical-align:middle}
.layer .blank{display:inline-block;width:0;height:100%;vertical-align:middle}

3. position:absolute와 tabel-cell을 이용한 중앙 정렬

  • 장점
    • ie8 이상 모든 브라우저에서 지원 가능합니다.
    • layer 안의 content 영역이 고정값이 아니라 가변이어도 자동으로 중앙정렬이 됩니다.
  • 단점
    • 코드 중첩이 여러번 되어야 합니다.
<div class="layer">
  <div class="layer_inner">
    <div class="content">Layer Contents</div>
  </div>
</div>
.layer{position:absolute;display:table;top:0;left:0;width:100%;height:100%}
.layer .layer_inner{display:table-cell;text-align:center;vertical-align:middle}
.layer .content{display:inline-block;background:#f00}

4. position:absolute와 transform을 이용한 중앙 정렬

  • 장점
    • ie9 이상 모든 브라우저에서 지원 가능합니다. (모바일 작업시 적합)
    • layer 안의 content 영역이 고정값이 아니라 가변이어도 자동으로 중앙정렬이 됩니다.
    • transform 속성은 GPU가속이 가능해서 속도향상에 도움이 됩니다.
    • 짧은 소스로 간결하게 만들수 있습니다.
  • 단점
    • 모바일에서 사용시 기기별로 버그가 생길 가능성이 있습니다.
<div class="layer">Layer Contents</div>
.layer{
  position:absolute;
  top:50%;
  left:50%;
  background:#f00;
  transform:translate(-50%, -50%)
}

5. position:absolute와 flex를 이용한 중앙 정렬

  • 장점
    • ie10 이상 모든 브라우저에서 지원 가능합니다. (모바일 작업시 적합)
    • layer 안의 content 영역이 고정값이 아니라 가변이어도 자동으로 중앙정렬이 됩니다.
    • 짧은 소스로 간결하게 만들수 있습니다.
  • 단점
    • 구버전 브라우저에서는 display:box와 병행해야 합니다.
<div class="layer">
  <span class="content">Layer Contents</span>
</div>
.layer{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  display:flex;
  align-items:center;
  justify-content:center;

  display:-webkit-flex;
  -webkit-align-item;center;
  -webkit-justify-content:center;
}
.layer .content{background:#f00}
display:flex 는 display:box, display:flexbox를 거쳐서 나온 최종 문법입니다.
하위 버전까지 대응하시려면 display:box 를 prefix붙여서 같이사용하시는게 좋습니다.
  • (new) 가장 최근의 문법 (display:flex;)
  • (tweener) 2011년부터 사용된 비공식 문법 (display:flexbox;)
  • (old) 2009년 부터 사용된 오래된 문법(display:box;)
  • browser support
    Chrome Safari Firefox Opera IE Android iOS
    20- (old)
    21+ (new)
    3.1+ (old)
    6.1+ (new)
    2-21 (old)
    22+ (new)
    12.1+ (new) 10 (tweener)
    11+ (new)
    2.1+ (old)
    4.4+ (new)
    3.2+ (old)
    7.1+ (new)

6. position:absolute와 box를 이용한 중앙 정렬

  • 기본 적인 내용은 위에 설명한 flex와 같습니다. 브라우저 구버전을 대응하기 위해서 box를 같이 적용해 보았습니다.
<div class="layer">
  <span class="content">Layer Contents</span>
</div>
.layer{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;

  align-items:center;
  justify-content:center;
  -webkit-align-items:center;
  -webkit-justify-content:center;

  -webkit-box-pack:center;
  -webkit-box-align:center;
  -moz-box-pack:center;
  -moz-box-align:center;
  -ms-box-pack:center;
  -ms-box-align:center;
}
.layer .content{background:#f00}

감사합니다 :)

유키님 프로필

회원 등급 : 1

유키

0개0개

댓글보기

전체 댓글
10
로그인
쏘냥
우와 ㅎㅎ 이렇게 많은 경우의수가 있는지 몰랐네요~ 한수 배우고 가요~! ㅎ
전 개인적으로 2번이 가장 맘에 드는 마크업이네용 ㅎㅎㅎ
케롬
다양한방법이있네요^^2번이 간단하고 좋아보이는데,.. 어떤원리로 중앙으로 동작하는지 모르겠네요.ㅜㅜ아직 수련이 필요한가 봅니다..ㅜ
blackgi****
진짜 많은수가 있네요~ 몰랐던 것도 알게 되고~
저도 2번이 가장 맘에 드네용~ㅎㅎㅎ 좋은정보 감사합니다
유키
글올리고 간만에 왔더니 댓글들을 써주셨네요 ^^. 2번의 경우는 inline-block 이 두개가 연다라 나올때
둘다 vertical-align:middle 속성을 주면 서로 반응해서 같이 중앙으로 오는 성질을 이용한 것입니다.
content 우측에 다른 div나 span이 와서 vertical-align:middle을 주어서 상호 중앙정렬을 시키면 면 좋겠지만 
따로 오는 내용이 없으므로 가상으로 <span class="blank"></span>을 만들어서 넓이는 0을 주고 높이값만 100%를
주었습니다.  height:100%인 blank와 상호 반응한 content div가 중앙으로 오게 되는 것입니다.
유키
2번방법은 중앙정렬 레이어 작업뿐만 아니라 ie7대응으로 리스트화면등을 만들때 안에 글들이
한줄로 나올때나 두줄이상이 될때 중앙정령을 맞추어야 할 경우 자주 사용하곤 합니다. ^^
현쿡
이렇게 많은 방법이 있었네요...
Kim Ji-Man
좋은정보 감사합니다.
주로 1~2번을 사용했는데 다양한 방법을 알게 됬습니다.
권택수
이렇게 다양한 방법이 있는지 새롭게 알게 되었습니다 !! :D 
Yeonjung An
감사합니다. ^^
Sang Jin Lee
중앙정렬의 방법이 참 많네요!! 좋은글 감사합니다!~

목록이전 글 보기253/370다음 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0