CSS - display: grid를 이용한 쉬운 중앙 정렬

Grid를 이용한 쉬운 중앙 정렬

오늘은 grid를 이용해서 content를 X축과 Y축으로 동시에 중앙정렬 하는 방법을 정리해보려고 한다.

html에 outer안에 inner가 아래처럼 있다고 가정하고 CSS를 작성했다.

<div class="outer">
  <div class="inner"></div>
</div>

기존 방법: flex

X축과 Y축 동시에 중앙정렬하는 방법은 보통 display: flex를 사용해서 다음과 같이 X축과 Y축을 중앙 정렬한다.

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

Code Pen 예시는 아래와 같다. (코드를 보기 쉽게 item-center class로 분리시켰다)
Flex 코드 예시 - codepen

새로운 방법: grid

grid방법은 display: grid를 사용한뒤 place-items: center만 해주면 X축과 Y축이 중앙정렬 된다.

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

Code Pen 예시는 아래와 같다. (코드를 보기 쉽게 item-center class로 분리시켰다)
grid 코드 예시 - codepen