html - 使用 Flexbox 定位

Question

我想使用 Flexbox 实现此结果:

• 红色 div 是容器。
• 绿色 div 是一个 navbar 菜单，应位于顶部水平居中。
• 然后，页面标题应在图像显示时居中。

PS:红色div的高度为100vh，宽度为100%。

使用此代码的结果会在容器的中心显示绿色div和标题。

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

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 header">
      <div class="menu">
        <!-- navbar items -->
      </div>
      <h1>TITLE</h1>
      <h2>Subtitle</h2>
    </div>
  </div>
</div>

Answer 1

您可以引入一个新元素将内容包裹在中间，将其设置为 flex-grow: 1 以便它消耗父级剩余的所有可用空间，然后将其居中该元素的内容。

.header {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header header {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header .menu {
  border: 1px solid green;
  margin-top: 1em;
  width: 80%;
  text-align: center;
  padding: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 header">
      <div class="menu">
        header menu
      </div>
      <header>
        <h1>TITLE</h1>
        <h2>Subtitle</h2>
      </header>
    </div>
  </div>
</div>