Vertical align on full height page using flexbox

Question

I am trying to create simple page that has header with navbar that is separated by content area. I am unable to force div #cover to be aligned in center vertically. I want my design to be responsive so I do not want to specify width on the parent div content. I know I can use flex: 1 to fill the rest of the area but I tried that and it does not work for me.

Please see here: 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>

Possible duplicate of [Aligning two flex items: one to the top, the other centered](http://stackoverflow.com/questions/35246718/aligning-two-flex-items-one-to-the-top-the-other-centered) — Michael Benjamin, Feb 13 '16 at 15:44

Stickers · Accepted Answer · 2016-02-13T16:10:44.077

You need to define the height for .site-content.

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

Or set the percentage height on html, body and .site-content tags.

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

Also reset the default margin on body as needed.

body {
  margin: 0;
}

To vertically center #cover, use align-items on the container.

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

Updated Codepen

Vertical align on full height page using flexbox

1 Answers1