[css] 화면 중앙에 배치시키기 :: 세로 중앙정렬

 

 

 

[css] 화면 중앙에 배치시키기 :: 세로 중앙 정렬

 

 

 

내가 지금 보고 있는 화면의 정중앙에 배치시키는 css

flex를 이용하면 매우 간단하게 가능합니다.

 

 

1. Flex를 이용한 화면 중앙 정렬

See the Pen Untitled by kim oya (@ttuttu) on CodePen.

 

 

2. Grid 사용 화면 중앙 정렬

Grid를 사용해서도 가능합니다.

#wrap {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

flex의 align-items와 justify-items 속성을 Grid의 place-items을 이용하면 한 번에 적용시킬 수 있습니다.

 

See the Pen Untitled by kim oya (@ttuttu) on CodePen.

만약 하위 버전 브라우저도 고려해야 하거나 Flex와 Grid가 아닌 방법으로

세로 가운데 정렬방법을 찾으신다면 이전 포스팅을 참고하세요

moo-you.tistory.com/65

컨텐츠 세로가운데 오도록하는 코딩방법