[CSS] 화면 중앙 배치 (Flexbox/Grid)
Sep 4, 2020 · 1 min read



CSS로 웹사이트의 레이아웃을 잡을 때, 브라우저 화면 맨 중앙에 어떤 엘리먼트를 배치해야할 경우가 자주 있는데요. 이게 의외로 생각보다 쉽지가 않아서 온갖 편법이 난무하던 시절이 있었습니다. 하지만 Flexbox와 Grid가 도입된 이후로는 엘리먼트를 화면에 중앙에 위치시키는 것이 정말 쉬워졌습니다.

HTML

중앙에 위치시킬 컨텐츠(content) 엘리먼트와 이 엘리먼트를 감싸는 래퍼(wrapper)엘리먼트에 대한 HTML을 작성하겠습니다.

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

Flexbox

먼저 Flexbox를 이용해서 컨텐츠 엘리먼트를 화면 중앙에 위치시켜 보겠습니다.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

수평 정렬과 수직 정렬을 위해서 각각 justify-contentalign-items 속성을 center로 설정해주면 됩니다.

Grid

다음으로 Grid를 이용해서 컨텐츠 엘리먼트를 화면 중앙에 위치시켜 보겠습니다.

.wrapper {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

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

마치면서

엘리먼트를 화면 중앙에 배치할 때 Flexbox와 Grid의 공통점은 해당 엘리먼트가 아닌 부모 엘리먼트을 대상으로 스타일을 적용한다는 것입니다. 그리고 자세히 보시면 두 가지 방법에서 모두 부모 엘리먼트의 min-height 속성을 100vh로 설정해주고 있는데요. 이렇게 스타일하지 않으면 부모 엘리먼트의 높이가 컨텐츠 높이만큼 자치하기 때문에 수평으로 정렬되는 효과만 나타나게 되오니 주의 바랍니다.





관련 포스트


Engineering Blog  by Dale Seo