css : 화면 정중앙에 위치하는 법

화면을 그리다 보면 화면 정중앙에 위치시키고 싶을 때가 있다.

이럴 때에는 display flex 방식과 화면을 100% 사용하는 100vh 를 함께 사용해주면 쉽게 구현 가능하다.

html 과 css 부분은 아래와 같다.

html 부분

<div class="login-wrapper">
	<div>화면</div>
</div>

 

css 부분

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