html - 垂直和水平居中，同时遵守 flexbox 的 html 规则

Question

我正在尝试制作类似于 Bootstraps 的东西 jumbotron使用 flexbox 的类。我希望所有内容都垂直和水平居中，但我希望框内的所有内容仍然遵守标准 HTML 规则。也就是说，如果我制作一个 <h1>然后是 <h4>我希望它们在不同的行上；然而，使用我当前的 flexbox 属性，这并没有发生。请参见下面的示例——它看起来像 titlesubtitle而不是 title\nsubtitle

.Jumbotron {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

<div class="Jumbotron">
  <h1>title</h1>
  <h4>subtitle</h4>
</div>

Answer 1

您可以引入一个新的非 flex 父元素来包裹这些元素，这样父元素将成为居中的 flex 子元素，而它的子元素将只是普通的非 flex 元素

.Jumbotron {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

<div class="Jumbotron">
  <div>
    <h1>title</h1>
    <h4>subtitle</h4>
  </div>
</div>

或者对于您的示例，如果您只想让 flex 父级的子级在他们自己的行上，请使用 flex-direction: column;

.Jumbotron {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}

<div class="Jumbotron">
  <h1>title</h1>
  <h4>subtitle</h4>
</div>