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

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 영역이 고정값이 아니라 가변이어도 자동으로 중앙정렬이 가능합니다.
• 코드 중첩이 여러번 되어야 합니다.