[css] 요소 높이가 가변인 경우 위아래 가운데정렬

.parent {
	position: relative;
    	height: 100%;	
        /* 적용 후에 먹지 않아서 뭐가 문제인가 봤더니 parent 요소 
        높이가 측정되지 않아 적용되지 않는 문제가 있었음 */
}

//	위아래 가운데에 요소를 넣을 때
.child {
	position: absolute;
	top:50%;
    	transform: translateY(-50%);
}


//	정가운데에 넣을 때
.child2 {
  position: absolute;
  top:50%;
  transform: translateY(-50%) translateX(-50%);
  left:50%;
}

 

translateY, translateX에 대해 간단히 설명하자면

부모 요소의 크기를 이용해 top, left로 가운데 지점의 위치를 구하고,

해당 지점에서 자식요소의 크기의 50%만큼 왼쪽, 윗쪽으로 와야 요소의 위치가 실제 정 가운데가 된다.

 

출처 : https://stackoverflow.com/questions/46184458/transform-translate-50-50