使用 Flexbox 时文本未居中

Question

目标：将 a 中包含的文本居中div，并且该文本是div包含该video元素的 a 的同级文本。

问题：我正在使用 Flexbox 来查看是否可以调整 div 的内容中心并沿垂直轴对齐其项目中心。它很好地沿 x 轴居中，但不沿 y 轴居中。

有什么建议么？

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
video {
  position: fixed;
  top: -100px;
}
.text {
  z-index: 2;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 1px solid black;*/
  /*height: 100%;*/
}

<div class="container">
  <video poster="http://www.thecanyon.com/assets/css/images/grandcanyon1.jpg" muted="true" autoplay="true">
    <source src="assets/Homepagevideo.mp4" type="video/mp4"></source>
  </video>
</div>
<div class="text">
  <p>This is a cool video landing page</p>
</div>

Answer 1

将宽度和高度 100% 添加到 .text 然后添加text-align:center

代码钉