css 가로,세로 중앙정렬

화면 정중앙 정렬방법 6가지 입니다.

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; }

링크예제 : http://codepen.io/myting/pen/LpKxro

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}

링크예제 : http://codepen.io/myting/pen/wKLgNd

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}

링크예제 :  http://codepen.io/myting/pen/LpKWqx

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%)
}

링크예제 : http://codepen.io/myting/pen/zvVZrQ

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}

링크예제 :  http://codepen.io/myting/pen/ojrZWx

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}

링크예제 : http://codepen.io/myting/pen/PPMKZG