[CSS] 수직 중앙 정렬

가로로 가운데 정렬은 매우 쉽지만,

수직(세로) 가운데 정렬은 항상 골칫거리였다..

여러가지 편법이 난무..

나는 보통 display: table 을 가지고 세로정렬을 했었는데

flex 개념이 생기면서 좀 더 간편해짐.

하지만 flex 개념은 너무 어려워ㅜㅜㅜ

<div class="vertical-center">
  <div class="item">수직 가운데</div>
</div>

.vertical-center{height: 100%}
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}

vertical-center의 높이에 따라 item이 가운데 정렬됨.

위 코드는 풀화면의 가운데 하고싶을 때..  

단, vertical-center의 부모가 있다면 부모도 모두 height: 100% 를 가지고 있어야 함.

정확하게는 item 요소의 자식요소가 가운데 정렬되는 구조임.