[CSS]화면 중앙 배치 ( flex, grid)

 

로그인 화면의 로그인박스를 화면 중앙에 배치하고 싶은데, flex와 gird를 이용하면 쉽게 해결할 수 있다.

부모엘리먼트를 flex나 gird로 설정하면 되고, min-height를 100vh를 하면 된다.

min-height를 넣지 않을 경우 컨텐츠 높이만큼 되기 때문에 수평 가운데 정렬처럼 느낄 수 있다.

 

flex

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

 

 

grid

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