[css] display: table;로 정중앙 스타일 구현

display: table;로 정중앙정렬 구현

 

display: flex;로 정중앙 스타일을 구현할 수 있지만 크로스 브라우징을 생각하면 여간 까다로운 스타일이 아닐 수 없다.

 

display: table;는 말그대로 테이블 태그는 아니지만 이것을 테이블처럼 여기겠다 라는 의미를 지닌다.

 

정중앙 정렬을 display: flex; 뿐만 아니라 또다른 방법이 있다는 걸 공유하고 싶어 display: table;를 포스팅 한 것이다.

 

display table 스타일을 사용하여 정중앙 정렬을 원할 경우 해당 대상을 감싸고 있는 부모가 필요하다.

 

<div class="show-table">
    <p class="table-item">정중앙정렬을 위한 텍스트입니다.</p>
</div>

 

html태그를 위와 같이 먼저 설계 후,

아래 처럼 스타일을 주면 미리보기 처럼 정중앙으로 스타일이 구현될 것이다.

 

.show-table {
  display: table;
  background-color: bisque;
  width: 100%;
  height: 500px;
  text-align: center;
}
.table-item {
  background-color: blueviolet;
  display: table-cell;
  vertical-align: middle;
}