position:absolute인 요소를 수직 정중앙에 배치하기

.parent{
	position:relative;
}

.parent .child{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

 

기준점 삼고 싶은 부모 요소에 position:relative를 준다.

 

그 부모 요소의 수직축 기준으로 정중앙에 위치시키고 싶을 때,

position:absolute;를 주고

top:50%;를 주면

 

부모의 height기준 정중앙인 지점부터 시작해서

자식 요소가 배치된다.

 

그러면 내가 원하는 위치보다 child 요소가 아래로 내려가있는 것을 확인할 수 있다.

 

이 문제를 해결하기 위해서 사용하는 속성이

transform이다.

 

transform에는 rotate, scale, translate 같은 함수가 와서

원하는 요소를 회전시키거나, 원래 크기보다 확대/축소하거나, 원래 위치를 기준으로 다른 곳에 배치할 수 있다.

 

transform: translateY()를 사용하면

지금 element가 있는 수직축을 기준으로 위치 변경이 가능하다.

 

나는 지금 위치 기준으로 절반정도 더 올라가서

부모 element의 정중앙에 가기를 원하기 때문에

transform: translateY(-50%);를 사용한 것.

 

 

 

 

 

 

원리를 이해하기 위해서 구구절절 설명했지만

이 코드는 늘 사용하는 꿀조합 코드이기 때문에

나중에는 그냥 손에서 자동으로 코드가 줄줄 나오게 되어 있다 ;-; ㅎㅎ