Как расположить неупорядоченный список по вертикали с помощью дисплея: 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>