아미(아름다운미소)

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

랭귀지/HTML

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

유키공 2018. 2. 13. 11:40

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



Comments