CSS 화면 정중앙 정렬

    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

정중앙 정렬시 height 값을 100% 설정하게 되면 스크롤이 생긴다.

 

vh는 뷰포트를 기준으로 한 값이다.

 

예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 된다.

그와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 된다.

 

즉, 100vh로 설정했다는 것은 뷰포트 전체높이만큼의 값이라는 뜻.

 

 

덧붙여.

margin: auto;는 가로정렬을 해준다.