Layer 화면 중앙정렬 방법

널리에 작성되어 있던 기존 글을 다듬어 재게시합니다.

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

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

• 장점 : IE7 이상 모든 브라우저에서 지원 가능합니다.
• 단점 : width와 height값이 고정사이즈인 상태에서만 사용할 수 있습니다.

.layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background: #f00;
  margin: -50px 0 0 -50px;
}

2. position:absolute와 margin:auto를 이용한 중앙 정렬

• 장점
  • IE8 이상 모든 브라우저에서 지원 가능합니다.
  • margin 마이너스 값과 달리 margin값에 대한 추가적 연산이 필요 없습니다.
• 단점 : width와 height값이 고정사이즈인 상태에서만 사용할 수 있습니다.

.layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: #f00;
  margin: auto;
}

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

• 장점
  • IE7 이상 모든 브라우저에서 지원 가능합니다.
  • layer 안의 content 영역이 고정값이 아니라 가변이어도 자동으로 중앙정렬이 됩니다.
• 단점
  • 불필요한 span 태그가 하나 더 필요합니다. (IE8이상의 환경에서는 :after로 대체 가능)

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

IE8이상일 경우 예제

.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:before {
   content: '';
   display: inline-block;
   width: 0;
   height: 100%;
   vertical-align: middle;
   margin-right: -4px;
}

(참고) :before가상선택자와 display:inline-block으로 인해 생기는 여백 때문에 margin-right:-4px이 추가적으로 필요합니다. (:after을 쓰는 경우, margin-left:-4px;)

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

• 장점
  • IE8 이상 모든 브라우저에서 지원 가능합니다.
  • layer 안의 content 영역이 고정값이 아니라 가변이어도 자동으로 중앙정렬이 됩니다.
• 단점
  • 코드 중첩이 여러번 되어야 합니다.

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

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

• 장점
  • IE9 이상 모든 브라우저에서 지원 가능합니다. (모바일 작업시 적합)
  • layer 안의 content 영역이 고정값이 아니라 가변이어도 자동으로 중앙정렬이 됩니다.
  • transform 속성은 GPU가속이 가능해서 속도향상에 도움이 됩니다.
  • 짧은 소스로 간결하게 만들수 있습니다.
• 단점
  • 모바일에서 사용시 기기별로 버그가 생길 가능성이 있습니다. (폰트가 희미하게 번져보이는 버그)

.layer {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #f00;
  transform: translate(-50%, -50%)
}

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

• 장점
  • IE10 이상 모든 브라우저에서 지원 가능합니다. (모바일 작업시 적합)
  • layer 안의 content 영역이 고정값이 아니라 가변이어도 자동으로 중앙정렬이 됩니다.
  • 짧은 소스로 간결하게 만들수 있습니다.
• 단점
  • 구버전 브라우저에서는 display:box와 병행해야 합니다.

.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;)

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

• 기본 적인 내용은 위에 설명한 flex와 같습니다. 브라우저 구버전을 대응하기 위해서 box를 같이 적용해 보았습니다.

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