div 세로 가운데 정렬 방법

div 블록요소들의 세로 가운데 정렬 방법에 대해 알아보도록 하겠습니다. 블록요소이면서 반응형으로 완성되는 레이아웃의 대부분은 세로 크기는 고정되어 있습니다. 본문 설명에서도 고정된 경우라고 가정하고 진행하겠습니다. 먼저 이 개념을 이해하려면 아래의 관련글들을 잘 읽어보시고 넘어가시는것을 추천합니다.

 

HTML 태그 기본 분류 - 블록요소 인라인요소

HTML 태그 기본 분류 - 블록요소 인라인요소

 

position을 사용한 세로 가운데 정렬

먼저 예시입니다. 세로 크기가 500px인 div가 있고 그 안에 100 x 100px 크기의 정사각형 div가 있다고 가정하겠습니다.

 

See the Pen Untitled by rgy0409 (@rgy0409) on CodePen.

 

이렇게 구성되어 있습니다. 노란색 백그라운드가 부모 div이고 그 가운데에 있는 div가 자식 div입니다. 가운데 정렬의 핵심은 position과 transform을 사용하는 것입니다.

 

먼저 부모 div에 position: relative;를 해줍니다. 그리고 가운데 정렬하고자 하는 자식 요소에 position: absolute;를 해줍니다. 이제 자식 요소는 부모 요소의 위치를 기준하여 움직이게 됩니다. 이에 대한 자세한 설명은 아래의 글을 참고하시면 좋습니다.

 

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

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

 

flex를 사용한 세로 가운데 정렬

다음은 CSS flex를 사용한 방법입니다. flex를 사용하면 정말 쉽게 중앙 정렬이 가능합니다. 그동안 마음대로 사용하지 못했는데 이유는 익스플로러 때문이었습니다. 이 빌이먹을 브라우저가 flex를 제대로 지원하지 못했죠. 하지만 이제 고민은 끝났습니다. 인터넷 익스플로러가 단종되었으니까요. 그러니 우리 모두 삶도 flex하고 CSS에서도 flex를 마음껏 사용합시다.

 

See the Pen CSS flex 세로 중앙 정렬 by rgy0409 (@rgy0409) on CodePen.

flex는 부모 요소에서 제어합니다. 그러면 바로 아래에 있는 1대 자식 요소에 영향을 주게 됩니다. 핵심은 다음의 세가지입니다.

 

display: flex; ▶ 디스플레이 속성을 flex로 변경

align-items: center; ▶ 자식 요소의 세로 정렬 방식을 중앙으로 변경

justify-content: center; ▶ 자식 요소의 가로 정렬 방식을 중앙으로 변경

 

CSS에서 이 세가지 옵션이면 바로 아래의 자식 요소는 무조건 중앙 정렬됩니다. 완전 쉽죠? flex는 요즘 반응형 웹에서 많이 사용하는 CSS 옵션으로 이에 대해 자세히 알고 싶으시면 아래의 글을 꼭 정독해 주시기 바랍니다.

 

CSS3: 플렉시블 박스 레이아웃 (div flex 정렬) 사용법

CSS3: 플렉시블 박스 레이아웃 (div flex 정렬) 사용법

이정도만 알고 넘어가면 이제 얼마든지 div 레이아웃을 세로든, 가로든 중앙정렬을 할 수 있을 것입니다. 끝.