부모 엘리먼트를 기준으로 수직 중앙 정렬하기

발생일: 2015.12.18

키워드: 수직 가운데 정렬, 수직 중앙 정렬, 수직 센터 정렬, vertical middle

문제:

특정 엘리먼트를 부모 엘리먼트의 수직 가운데 정렬하려고 한다.

해결책:

display의 table 속성을 활용해 수직 정렬할 수 있다.

<div class="parent">

  <div class="child"></div>

</div>

.parent {

  display:table; // 부모는 테이블 속성으로,

  width:100%;

  height:200px; // 높이가 있어야 한다.

  border:1px solid green;

}

.child {

  display:table-cell; // 자식은 테이블 셀 속성으로,

  text-align:center;

  vertical-align:middle; // 가운데 정렬한다.

}