CSS로 화면 중앙에 HTML 요소 배치하기 (Flexbox/Grid)

CSS로 웹사이트의 레이아웃을 잡다보면 브라우저 화면 맨 중앙에 어떤 HTML 요소를 배치해야 할 경우가 자주 생기지요?

이번 글에서는 CSS의 Flexbox나 Grid를 활용하여 얼마나 쉽게 HTML 요소를 브라우저 화면에 중앙에 위치시킬 수 있는지 알아보겠습니다.

기본 HTML/CSS

중앙에 위치시킬 컨텐츠(content) 요소와 이 요소를 감싸는 래퍼(wrapper)요소에 대한 HTML 마크업을 하겠습니다.

<div class="wrapper">
  <div class="content">중앙</div>
</div>

그 다음 각 요소를 구분하기 쉽도록 CSS로 약간의 스타일을 해주겠습니다.

.wrapper {
  background: navy;
  min-height: 100dvh;}

.content {
  background: coral;
  padding: 3rem;
  font-size: 2rem;
  border-radius: 1rem;
}

여기서 주의 깊게 보실 부분이 바로 래퍼 요소의 min-height 속성을 100dvh로 설정해주는 것인데요. 이렇게 하지 않으면 래퍼 요소의 높이가 컨텐트 요소이 높이와 동일해지기 때문에 밑에서 어떤 스타일을 적용하든 가로 방향으로만 중앙 정렬이 되고 세로 방향으로는 정렬되지 않게 됩니다.

CSS의 동적 뷰포트 단위를 활용하여 HTML 요소를 브라우저 화면 높이에 딱 맞추는 방법에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다.

Flexbox

먼저 Flexbox를 이용해서 컨텐츠 요소를 브라우저 화면 중앙에 위치시켜 보겠습니다.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

가로 방향 정렬과 세로 방향 정렬을 위해서 각각 justify-content와 align-items 속성을 center로 설정해주면 됩니다.

Grid

다음으로 Grid를 이용해서 컨텐츠 요소를 브라우저 화면 중앙에 배치시켜볼까요?

.wrapper {
  display: grid;
  place-items: center;
}

Grid에는 편리하게도 align-items와 justify-items 속성을 한 번에 적용할 수 있도록 place-items이라는 속성을 제공하고 있습니다. 따라서 이 속성값만 center로 설정해주면 됩니다.

마치면서

지금까지 간단한 실습을 통해서 CSS로 HTML 요소를 브라우저 화면 중앙에 배치하는 방법에 대해서 살펴보았습니다.

예전에 CSS에 Flexbox와 Grid가 없을 때는 컨텐츠 중앙 정렬이 생각보다 쉽지가 않아서 많은 분들이 스트레스를 받던 시절이 있었는데요. 다행히도 요즘에는 이 부분이 쉬워져서 웹 개발하기 너무 좋아진 것 같습니다 😊