Centering elements vertically in a fixed-height container

css, css-position, flexbox, html

Solution

Add display flex and align-self center: https://jsfiddle.net/w3s8cj92/1/

header {
  height: 80px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
}

footer {
  background: #ddd;
}

* {
  color: transparent
}

nav {
  height: 100%;
  width: 100%;
  background-color: bisque;
  display: flex;
}

nav ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  top: 50%;
  align-self: center;
}

nav ul li {
  display: inline-block;
  float: left;
}

nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 10px;
}

<header class="nav-down">
  <nav class="headernav">
    <ul>
      <li><a href="#">Gig</a></li>
      <li><a href="#">ity</a></li>
      <li><a href="#">element</a></li>
    </ul>
  </nav>
</header>

Problem

I have a website that needs a pixel based navbar - in this case `height: 80px`. The problem is, I can't center the `ul` and `li` elements vertically. I've tried using: `top:50%; transform: translate(0,-50%)`, as shown in my jsfiddle, and also flex positioning, but none have worked. Jsfiddle: https://jsfiddle.net/agreyfield91/w3s8cj92/ ``` header { height: 80px; position: fixed; top: 0; transition: top 0.2s ease-in-out; width: 100%; } footer { background: #ddd; } * { color: transparent } nav { height: 100%; width: 100%; background-color: bisque; } nav ul { list-style: none; text-align: center; margin: 0; padding: 0; top: 50%; transform: translate(0, -50%); } nav ul li { display: inline-block; float: left; } nav ul li a { display: block; padding: 15px; text-decoration: none; color: #aaa; font-weight: 800; text-transform: uppercase; margin: 0 10px; } ``` ``` <header class="nav-down"> <nav class="headernav"> <ul> <li><a href="#">Gig</a></li> <li><a href="#">ity</a></li> <li><a href="#">element</a></li> </ul> </nav> </header> ```

Original source

Related problems