CSS3 div 안에 div 세로 가운데 정렬 방법 (position, transform 이용)

2018. 12. 28. 00:03

브라우저의 창 크기와 상관 없이, 정 가운데 div를 위치하는 방법에 대해서는 지난시간에 말씀드린바 있습니다. 오늘은 div를 하나 생성하고, 그 안에 div를 하나 더 만들어서 정가운데로 위치하는 방법을 알아보겠습니다.

제가 사용하는 방법은 position 요소를 이용하는 것 입니다. 여기에 transform 요소까지 사용하면 가장 밖에 있는 div의 가로 세로 크기에 상관 없이, 또한 가운데 배치되는 div의 가로 세로 크기에 상관 없이 무조건 정중앙에 위치하도록 만들 수 있습니다. 그 예시가 아래에 있습니다.

See the Pen CSS3: DIV in DIV Center (Middle) Align by rgy0409 (@rgy0409) on CodePen.

스크롤해서 하나하나 살펴보시기 바랍니다. 그리고 HTML과 CSS의 구조도 같이 살펴봐주세요. 아래에 다시한번 설명드리겠습니다. 먼저 첫번째 div의 경우 입니다.

1. transform 사용하기

transform: translate(50%, 50%);

이 경우는 transform 요소만 하나 들어갔습니다. 만약 부모 요소의 크기가 변동이 없고, 자식 요소의 크기값도 변동이 없으며, 이 둘의 크기 차이는 두배라는 가정하에서 가운데 있는 div만 가운데 오려는 조건이라고 한다면 이렇게 자식 div에만 트랜스폼 요소를 줘서 정 중앙에 오게 만들 수 있습니다.

흔히 포토샵에서도 transform 이라고 메뉴가 있잖아요? 같은 개념입니다. 트랜스폼은 오브젝트를 이동시키고, 크기를 변형시키고 찌그러뜨리거나 3D처럼 만들수도 있습니다. 트랜스폼에는 여러가지 기능이 있는데, 위치에 대한 설정을 주는것이 위에 나와있는 translate 입니다. 괄호안에는 콤마를 넣어 두번의 숫자데이터를 넣습니다. 첫번째는 X축에 대한것, 두번째는 Y축에 대한 것 입니다. 50% 라는 이야기는 X축으로 50%, Y축으로 50%를 이동하라는 개념입니다. 그러니 커다란 div와 작은 div의 가로 세로 크기가 정확히 두배차이가 나야 이 조건은 성립됩니다.

2. position + 수동 위치값 사용하기

position: absolute;

top: 75px;

left: 75px;

두번째 div의 경우는 정확히 각 div의 크기를 계산해서 입력해준 경우 입니다. 여기에서는 position:absolute; 를 사용했습니다. 때문에 부모 요소의 div에도 position: relative; 가 있어야 합니다. 두 div의 크기가 달라지게 되면 이것도 다시 바꿔줘야 합니다. 그래서 제가 사용하는 방법은 세번째 입니다.

3. 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를 정중앙으로 오게 하는 방법은 이 방법이 짱입니다. 그림으로 다시 설명드리면 이런 원리 입니다.