널리

안녕하세요. 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}

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}

감사합니다 :)