div 수직 중앙 정렬 방법

1. position

1. 기준점 설정

부모요소 position : relative
자식요소 position : absolute

2. 이동

(자식요소) 좌상단 꼭지점 기준으로, 자식요소가 부모요소의 50% 만큼 움직이게 한다
자식요소 top : 50%, left : 50%

3. 세부 조정

자식요소의 X, Y 각각 -50% 만큼 이동시킨다
transform : translate (-50%)

2. flex

부모요소에 아래와 같이 속성 설정

display : flex
align-item : middle // 수직 중앙 정렬
text-align : center

3. table

부모요소

display : table
table-layout : fixed 

자식요소

display : table-cell
vertical-align : middle