2018/04/26 09:44

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

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}


덧글

댓글 입력 영역