div내 div 수직 가운데 정렬하기

flex로 하려고 몇시간동안 해봤는데 안돼서 아래 방법으로 했다.

 

position + transform 사용하기

.in3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 

이 방법을 추천드리는 이유는 위에서 언급했던 단점들을 모두 극복한 방법이기 때문입니다. 코딩은 살짝 더 복잡해도 부모 요소의 div가 사이즈가 변경되어도, 위치가 변경되어도, 또는 자식 요소의 div 크기가 변경되어도 늘 정중앙에 배치됩니다. 그냥 공식처럼 외워두시면 될 것 같습니다.

 

포지션의 기준점은 div의 사각형을 화면상에서 바라봤을 경우 왼쪽 상단 꼭지점이 됩니다. 여기를 좌측으로 50% 옮기고 위에서 50% 아래로 배치하면 가운데의 div가 약간 우측 아래로 배치되어 있을 겁니다. 이것을 다시 정중앙으로 오게 만들기 위해서 transform을 사용한 것 입니다. -50%라는 이야기는 자식요소 div의 가로, 세로 크기값의 -50% 니까, 계산된 값만큼 반대로 이동하게 됩니다. 결국 정중앙에 배치가 됩니다. div 안쪽의 div를 정중앙으로 오게 하는 방법은 이 방법이 짱입니다. 그림으로 다시 설명드리면 이런 원리 입니다.

 

 

그림으로 보시면 어떤 원리인지 이제 좀 대충 이해가 될 것이라고 생각합니다. 저 빨간점이 position의 기준점이 되며, 이 기준점을 translate로 인해서 옮겨지게 되는 것 입니다. 결국 가운데 div는 최종적으로 정중앙에 위치하게 됩니다.

출처: https://rgy0409.tistory.com/3025 [친절한효자손 취미생활:티스토리]