使用flexbox在全高页面上垂直对齐

时间:2016-02-13 15:33:43

标签: css flexbox

我正在尝试创建一个简单的页面,其中包含由内容区域分隔的导航栏。我无法强制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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

您需要为height定义.site-content

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

或者在htmlbody.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