html css 태그, div 중앙정렬 방법 6가지

html css 태그, div 중앙정렬 방법 6가지

table 태그에서는 valign을 사용하여 세로 정렬이 가능하지만 div 태그는 세로정렬 옵션을 지원하지 않는다.
div 태그에서 중앙정렬하는 방법 6가지를 알아보자

 

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

 

* html  

<div class="layer">중앙정렬 방법</div> 

* css

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

• ie7 이상 모든 브라우저에서 지원 가능하다.
• width와 height값이 고정사이즈인 상태에서만 사용할 수 있다.

 

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

 

* html

<div class="layer">

  <span class="content">중앙정렬 방법</span>

  <span class="blank"></span>

</div>

* css

.layer{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}

.layer .content{display:inline-block;background:skyblue;vertical-align:middle}

.layer .blank{display:inline-block;width:0;height:100%;vertical-align:middle}

• ie7 이상 모든 브라우저에서 지원 가능하다.
• layer 안의 content 영역이 고정값이 아니라 가변이어도 자동으로 중앙정렬이 가능하다.
• 불필요한 span 태그가 하나 더 필요하다. (모바일에선 :after로 대체 가능)

 

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

 

* html

<div class="layer">
  <div class="layer_inner">
    <div class="content">중앙정렬 방법</div>
  </div>
</div>

* css

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

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

 

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

 

* html

<div class="layer">중앙정렬 방법</div>

* css

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

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

 

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

 

* html

<div class="layer">
  <span class="content">중앙정렬 방법</span>
</div>

* css

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

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

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

 

* html

<div class="layer">
  <span class="content">중앙정렬 방법</span>
</div>

* css

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

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

출처: http://dongpal.tistory.com/2 [dongpal's story]