如何使用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>

怎么了？

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>