Grid 수직정렬 제대로 안됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 중앙 정렬의 모든 것</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- 활용도 높은 CSS3 속성을 활용한 실전 스킬과 팁-->

  <!-- CSS 중앙 정렬의 모든 것 -->

  <div class="element">
    This is Content
  </div>

  <!-- <div>
    <img src="images/icon-lock.svg"> <span>해당 컨텐츠는 회원전용입니다.</span>
  </div> -->

</body>
</html>

/* XEION CDN */
/* @import url('//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); */

/* Google Web Font */
/* @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); */


* {
  font-family: 'Raleway', sans-serif;
}

body {
  height: 100vh;
  /* Flex */
  /* display: flex;
  justify-content: center;
  align-items: center; */

  /* Grid */
  /* display: grid;
  justify-content: center;
  align-items: center */

  /* place-item */
  display: grid;
  place-items: center;
}

.element {
  border: 5px solid #000;
  background-color: skyblue;
  color: #fff;
  width: 200px;
  height: 200px;

  /* Position */
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translateX(-50%);
  transform: translateY(-50%); */

  /* Margin */
  /* margin: auto; */
}

선생님 강의와 똑같이 적용했는데 제 화면에서는 .element가 위쪽에 붙어있어서요. flex로 정렬했을 때는 중간에 잘 오는데 grid로 정렬하니까 수직 중앙 정렬이 안먹습니다. 왜 그런건가요?ㅠㅠ 이유를 알고싶습니다.

인프런 커뮤니티 질문&답변