css - 使用 Flexbox 在全高页面上垂直对齐

Question

我正在尝试创建简单的页面，其标题和导航栏由内容区域分隔。我无法强制 div #cover 垂直居中对齐。我希望我的设计具有响应能力，因此我不想在父 div content 上指定宽度。我知道我可以使用 flex: 1 来填充其余区域，但我尝试过，但它对我不起作用。

请参见此处:Codepen

.site-content {
  display: flex;
  flex-direction: column;
}
.navbar {
  display: flex;
  justify-content: space-between;
}
nav ul {
  display: flex;
  list-style-type: none;
}
li {
  margin: 0 10px;
}
.content {
  display: flex;
  flex: 1;
}

<div class="site-content">
  <div class="navbar">
    <div class="title">TitLe</div>
    <nav>
      <ul>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
      </ul>
    </nav>
  </div>
  <div class="content">
    <div id="cover">
      Lorem ipsum
    </div>
  </div>
</div>

Answer 1

您需要定义.site-content的高度。

.site-content {
  display: flex;
  flex-direction: column;
  height: 100vh; /*new*/
}

或者在 html、body 和 .site-content 标记上设置百分比高度。

html, body, .site-content {
  height: 100%;
}

还可以根据需要重置 body 上的默认边距。

body {
  margin: 0;
}

要垂直居中#cover，请在容器上使用align-items。

.content {
  display: flex;
  flex: 1;
  align-items: center; /*new*/
}

<强> Updated Codepen