Centering elements vertically in a fixed

This question already has an answer here:

Flexbox: center horizontally and vertically 8 answers

---

添加显示flex和align-self中心：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>

---

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 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>

---

看起来你的代码可能更简单：

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>

链接地址: http://www.djcxy.com/p/75998.html

上一篇: 在div中垂直居中元素

下一篇: 将元件垂直居中固定