如何使用 flexbox 垂直对齐页面上的 div

Question

以下不是垂直对齐 div 与浏览器选项卡中的文本（它是正确水平对齐）：

 <div style="height: 100%; display: flex; align-items: center; justify-content: center;">

  <div>
    Some vertical and horizontal aligned text
  </div>

</div>

怎么了？

原文由 EricC 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题在于您给父容器的高度。 height :100% 不占用整个高度。将其更改为 100vh 或类似的

这是更新的 演示

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

 <div class="container">
  <div>
    Some vertical and horizontal aligned text
  </div>
</div>

原文由 Syam Pillai 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

请尝试以下代码

 body, html{
  height:100%;
  width:100%;
  padding:0px;
  margin:0px;
}

.demo-wp{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:green;
  height:100%;
}

.inner-div{
  background:gold;
  padding:20px;
}

 <div class="demo-wp">

  <div class="inner-div">
    Some vertical and horizontal aligned text
  </div>

</div>

原文由 Santosh Khalse 发布，翻译遵循 CC BY-SA 3.0 许可协议