如何使用显示垂直居中排列无序列表：flex

Question

嘿，我正在尝试将ul垂直居中于flex div中。 现在它的中心仅在水平方向。

如何将其垂直居中？

#skills {
  background-color: #262626;
  height: 100px;
  /* padding: 50px 0 50px 0; */
}
#skills ul {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}
#skills ul li {
  font-size: 60px;
  flex-grow: 1;
  text-align: center;
}
.fab,
.fas {
  color: white;
}

<section id="skills">
    <ul>
        <li><i class="fab fa-java"></i></li>
        <li><i class="fab fa-html5"></i>
        <li><i class="fab fa-css3-alt"></i></li>
        <li><i class="fab fa-js-square"></i></li>
        <li><i class="fab fa-node"></i></li>
        <li><i class="fab fa-angular"></i></li>
        <li><i class="fab fa-aws"></i></li>
        <li><i class="fab fa-git"></i></li>
        <li><i class="fas fa-database"></i></li>
    </ul>  
</section>

Answer 1

您已成功将列表项置于ul内部的中心。

#skills ul {
    display: flex;
    align-items: center;
}

您只是没有将ul居于section内。因此，将其添加到您的代码中：

section {
  display: flex;
  align-items: center;
}

#skills {
  background-color: #262626;
  height: 100px;
  /* padding: 50px 0 50px 0; */
  /* new */
  display: flex;
  align-items: center;
}

#skills ul {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

#skills ul li {
  font-size: 60px;
  flex-grow: 1;
  text-align: center;
}

.fab,
.fas {
  color: white;
}

<section id="skills">
  <ul>
    <li><i class="fab fa-java"></i></li>
    <li><i class="fab fa-html5"></i></li>
    <li><i class="fab fa-css3-alt"></i></li>
    <li><i class="fab fa-js-square"></i></li>
    <li><i class="fab fa-node"></i></li>
    <li><i class="fab fa-angular"></i></li>
    <li><i class="fab fa-aws"></i></li>
    <li><i class="fab fa-git"></i></li>
    <li><i class="fas fa-database"></i></li>
  </ul>
</section>