html – 如何使用flexbox垂直对齐div页面

发布时间：2020-12-14 16:43:01 所属栏目：资源来源：网络整理

导读：参见英文答案 Why is percentage height not working on my div? 2个以下内容不是将div与浏览器选项卡中的文本垂直对齐(它正确水平对齐)： div style="height: 100%; display: flex; align-items: center; justify-content: center;" div Some vertical and

参见英文答案 > Why is percentage height not working on my div? 2个
以下内容不是将div与浏览器选项卡中的文本垂直对齐(它正确水平对齐)：

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

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

</div>

怎么了？

解决方法

问题在于您给父容器的高度.高度：100％不占整个高度.将其改为100vh或类似

这是更新的Demo

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!