div를 수직 및 수평으로 가운데 맞추는 방법

Question

div에 텍스트 (h1)을 가운데 정렬하는 방법에 문제가 있습니다. 웹 페이지가 전체 화면으로 표시되고 vh 단위로 표시되도록했습니다.

.page { height: 100vh; 
     width: 100%;} 

해당 페이지에서 div는 가로 세로로 가운데에 놓기를 원합니다. 나는 시도했다.

.div { top: 50%; 
     left: 50%;} 

그러나 그것은 단지 트릭을하지 않았다. 나는 또한이 화면이 어떤 스크린에도 집중되어있는 "resposive"가되기를 바란다. 다음과 같이 빌드하려고합니다. http://www.anthonygoodisondesign.com/

Answer 1

아래와 같이 CSS 코드를 사용하십시오.

div{height:100vh; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    }

<div> <h1>center me</h1></div>

Answer 2

사용이 :

text-align: center; 
position: relative; 
top: 40vh; 
transform: translateY(-50%); 

https://jsfiddle.net/yak613/pLb8aysd/