如何使用flexbox将始终与div大小相关的文本居中

Question

我用flexbox创建了一个div框。 此盒子的最小高度为： https://jsfiddle.net/m267w3ku/1/

代码：

<section id="welcome-section">
      <h1>Hey, I am Someone!</h1>
</section>


#welcome-section{
  background-color:#5998ff;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:400px;
  width:100%;
}

我所拥有的：文本位于中间，框的最低高度为400像素。

问题，当最小化浏览器时，文本并不总是居中显示

我想要的即使在最小化浏览器的情况下，文本也始终相对于框大小居中

现在最小化浏览器时，最终会发生这种情况：

Answer 1

尝试添加text-align: center：https://jsfiddle.net/82x7vm9h/

Answer 2

对于我来说，文本相对于框尺寸保持垂直居中。在什么情况下，它不适用于您？

如果您想要的蓝色框是窗口高度的100％，请尝试：

height: 100vh;

Answer 3

#welcome-section {
  background-color: #5998ff;
  display: flex;
  
  height: 100vh;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}

<section id="welcome-section">
  <h1>Hey, I am Someone!</h1>
</section>

希望对您有帮助