使用flexbox定位

Question

我想使用Flexbox实现此结果：

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

PS：红色div的高度为100vh，宽度为100％。

使用此代码的结果显示绿色div和container中心的标题。

.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，以便它消耗父节点遗留的所有可用空间，然后将该元素的内容居中。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在flex-direction: column和header上设置align-items: center以进行水平居中。然后使用边距垂直居中h1和h2。请注意，.menu会占用header中的空格，因此h1和h2将在剩余的空间中居中，否则您需要使用position: absolute

＆＃13;

＆＃13;

div.header {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  border: 2px solid red;
  padding-top: 10px;
  align-items: center;
}
div.menu {
  border: 2px solid green;
  height: 50px;
  width: 50%;
}
.header h1 {
  margin-bottom: 0;
  margin-top: auto;
}
.header h2 {
  margin-bottom: auto;
  margin-top: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<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>

＆＃13;

＆＃13;

＆＃13;