How to vertically center an unordered list with display: flex

Question

Hey people I'm trying to vertically center an ul inside a flex div. right now its center only for the horizontal.

how can I center it vertically?

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

Check the answer to this question. https://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox — cvb, Nov 15 '18 at 21:06

Michael Benjamin · Accepted Answer · 2018-11-16T02:04:56.450

You have successfully centered the list items inside the ul.

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

You just haven't centered the ul inside the section. So add this to your code:

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>

How to vertically center an unordered list with display: flex

1 Answers1