css - 用 flexbox 居中打破界限？

Question

我正在尝试将我的标题垂直/水平居中，副标题直接位于其下方。这是我的尝试:

html, body, h1 {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

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

<div id="container">
  <h1>Main Title</h1>
  <span>Subtitle</span>
</div>

如您所见，副标题与 h1 在同一行，我正试图将其置于其下方。我试过将 h1 设置为 display: block; 但在 container< 上使用 display: flex 时似乎不起作用。任何帮助将不胜感激。

Answer 1

在容器上设置flex-direction: column

html, body, h1 {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

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

<div id="container">
  <h1>Main Title</h1>
  <span>Subtitle</span>
</div>