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

발생일: 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; // 가운데 정렬한다.
}


카테고리

분류 전체보기 (710)
About me. (6)
Daylogs (675)
영어공부 (0)
My works - 추억 (29)
비공개 (0)