为什么未启用flexbox中的证明内容？

Question

我想使用flexbox将黄色的“开始”按钮定位到页面的中心。
我的宽度方向居中对齐，但垂直方向未启用justify-content。

我该怎么做？

* {
  font-family: "Noto Sans",Meiryo,"Hiragino Kaku Gothic Pro";
}

#container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#btn {
  height: 12vh;
  width: 32vw;
  font-size: 370%;
  text-align: center;
  line-height: 12vh;
  color: white;
  background-color: #fbbc05;
  border-radius: 20px;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

<div id="container">
  <div id="btn">
    Start
  </div>
</div>