컨텐츠 세로가운데 오도록하는 코딩방법

대상 요소가 한줄일 경우

부모요소 text-align : center; line-height : height값; 

자식요소 : margin:0 auto; line-height:height값; 

display:table 사용방법

부모요소 : display:table;

자식요소 : display:table-cell, text-align:center; vertical-align:middle;

position:absolute; 사용1 : 흔하게 사용되지만 영역이 없어지기 때문에 반응형 할 때 사용하기 불편하다 

부모요소 : position:relative;

자식요소 : position:absolute; top:50%; left: 50%; margin-top:-(height값 절반); margin-left:-(width값 절반);

position:absolute; 사용2  

부모요소 : position:relative;

자식요소 : position:absolute; top:0; left:0; top:0; right:0; margin: auto;

만약 자식요소의 가로와 세로 값을 모를 경우

부모요소 : position:relative;

자식요소 : position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%);

display: flex 사용 : 최신브라우저에서만 동작

부모요소 : height 값 설정

자식요소 : display: flex; justify-content: center; align-items: center;