Centering elements vertically in a fixed-height container

Question

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>

All you need is to add `position: relative; overflow: hidden;` to the `nav ul` rule. The `position: relative;` to make transform work and `overflow: hidden;` to make it take height from its children (which is floated and need to be cleared). [**Fiddle demo**](https://jsfiddle.net/LGSon/w3s8cj92/3/) — Asons, May 14 '17 at 08:00

score 4 · Accepted Answer · answered May 14 '17 at 01:21

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>

score 1 · Answer 2 · answered May 14 '17 at 01:19

You either need to add position: relative to nav and position: absolute to nav ul (to get top: 50%; transform: translate(0,-50%); to work) or you can just use display: flex; align-items: center on nav. I would just use flexbox.

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;
  align-items: center;
}

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

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>

score 1 · Answer 3 · answered May 14 '17 at 01:29

It seems like your code could be much simpler:

nav {
  height: 80px;
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;   /* horizontal alignment of child elements (optional) */
  background-color: bisque;
}

nav a {
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  text-transform: uppercase;
  display: flex;
  align-items: center;      /* vertical alignment of text */
  border: 1px dashed red;
}

a + a {
  margin-left: 20px;
}

<nav>
  <a href="#">Gig</a>
  <a href="#">ity</a>
  <a href="#">element</a>
</nav>

I added borders around the links to show the clickable area, which is the entire height of the header. Other answers here just cover the text. Not sure which way you want to go. — Michael Benjamin, May 14 '17 at 13:11

emii · Answer 4 · 2017-05-14T02:16:32.957

In cases when you have static height of block, it is possible to center elements with no-wrap container with vertically in middle aligned inline[-block] elements.

.vertical-container {
  height: 80px;
  border: 1px solid black;
  white-space: nowrap;
  /* this prevents vertical block to "fall out" of container */
}

.vertical-aligner {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}

.vertical-content {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid red;
  white-space: normal;
  /* reset white-space for content */
}

<div class="vertical-container"><span class="vertical-aligner"></span><span class="vertical-content">Text that should be vertically middle of container</span></div>

I have updated your fiddle accordingly: https://jsfiddle.net/w3s8cj92/2/

P.S. I would like to provide more information, but later

score 0 · Answer 5 · answered May 14 '17 at 02:35

CSS Replace

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

footer { background: #ddd;}
* { color: transparent}
nav {
    height: 100%;
  width: 100%;
  background-color: bisque;
}
nav ul {
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    height: 80px;
}
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;
}

Here changes header css and nav ul css its work fine – chirag solanki May 14 '17 at 02:36 — chirag solanki, May 14 '17 at 02:36

Centering elements vertically in a fixed-height container

5 Answers5