[개발일기] css 가운데정렬

(2023.06.03) 화면의 정중앙에 요소를 배치하고 싶으면 flex를 이용하자.

여기서 정중앙은 가로, 세로 모두 가운데에 있어야 한다.

<div class='wrapper'>
  <div class='content'>test</div>
</div>

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

중요한건 wrapper에 min-height: '100vh'를 해줘야 한다.

이렇게 하면 화면크기가 바뀌더라도 wrapper의 최소 height값은 그 화면 높이의 100%가 된다.