如何将页面上的div与flexbox垂直对齐[重复]答案

【问题标题】：How to vertically align div on page with flexbox [duplicate]如何将页面上的div与flexbox垂直对齐[重复]
【发布时间】：2017-02-03 11:36:51
【问题描述】：

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

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

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

</div>

怎么了？

【问题讨论】：

设置父级的高度。在您的情况下，body 和 html。当你使用 100% 时——想想 100% 什么？

标签： html css flexbox

【解决方案1】：

问题在于您给父容器的高度。 height :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>

【讨论】：

【解决方案2】：

试试这个：

<div style="height: 100vh; display: flex; align-items: center; justify-content: center;">
  <div>
    Some vertical and horizontal aligned text
  </div>
</div>

这是因为你的父母div没有占据全部高度。

【讨论】：

【解决方案3】：

试试这个

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

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

</div>

【讨论】：

【解决方案4】：

请尝试下面的代码

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>

【讨论】：