如何使用 flexbox 在页面上垂直对齐 div [英] How to vertically align div on page with flexbox

问题描述

以下不是将 div 与浏览器选项卡中的文本垂直对齐(它正确地水平对齐):

<div style="height: 100%; display: flex; align-items: center; justify-content: center;"><div>一些垂直和水平对齐的文本

怎么了?

解决方案

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

这是更新的演示

.container{高度:100vh；显示:弹性；对齐项目:居中；对齐内容:居中；}

<div>一些垂直和水平对齐的文本

The following is not vertically aligning the div with text in browser tab (it is horizontally aligning correctly):

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

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

</div>

What is wrong?

解决方案

The problem is with the height you given to the parent container. The height :100% does not take whole height. change that to 100vh or like that

Here is the updated Demo

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

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

这篇关于如何使用 flexbox 在页面上垂直对齐 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！