水平和垂直将h1和h2居中

Question

如何在保持视口高度100％的同时垂直和水平对齐h1和h2？

我已经将align-items: center; justify-content: center;添加到了容器中，并将text-align: center; vertical-align: center;添加到了标头类中。将display: block;添加到任何一个都不起作用。

预期：

实际：

到底发生了什么？是导航栏吗？

#welcome-section {
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.welcome-header {
  text-align: center;
  vertical-align: center;
}

<div id="welcome-section">
  <h1 class="welcome-header">Namaste, Kevin here.</h1>
  <h2 class="welcome-header">And I'm a front-end developer</h2>
</div>

Answer 1

如果使用弯曲对齐属性，则需要弯曲显示。

#welcome-section {
  height: 100vh;
  display:flex;/*this is  what was missing */
  flex-flow:column;/*this is  what was missing too*/
  align-items: center;
  justify-content: center;
}

https://codepen.io/gc-nomade/pen/MqJgVG

body {
  margin:0;
}

#welcome-section {
  height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;       /*this is  what was missing */
  flex-flow: column;  /*this is  what was missing too*/
}

.welcome-header {
  text-align: center;
  /*vertical-align: center; useless*/
}

<div id="welcome-section">
  <h1 class="welcome-header">Namaste, Kevin here.</h1>
  <h2 class="welcome-header">And I'm a front-end developer</h2>
</div>

Answer 2

将您的父班设为亲戚

#welcome-section {
  height: 100vh;
  align-items: center;
  justify-content: center;
  position:relative;
}

然后用两个h1 h2标签包装您的欢迎标头 并使其绝对并居中：

.welcome-header {
  text-align: center;
  vertical-align: center;
  position:absolute;
  left:0;
  right:0;
  top:50%;
  margin-bottom:20px;
}


<div id="welcome-section">
  <div class="welcome-header">
    <h1>Namaste, Kevin here.</h1>
    <h2>And I'm a front-end developer</h2>
  </div>
</div>

Codepen link