如何使用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>一些纵横排列的文字< / div>< / div>  

b
$ b

有什么不对？

解决方案

问题在于你给父容器的高度。 高度：100％不占用整个高度。把它改成 100vh 或者像这样

这里是更新后的 Demo
$ b

  .container {height：100vh;显示：flex; align-items：center; / / code>< / pre> 
 < div class = 容器 > < DIV>一些垂直和水平对齐的文本< / div>< / 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屋！