How to center a flex child vertically which has height set to 100%

Question

I've some elements within a flex div that I want to be the same height as its parent, but also to center its contents vertically.

.container{
  display:flex;
  border:1px solid orange;
}
li{
  border:1px solid red;
  height:100%;
  
}
ul{
  list-style:none;
  display:flex;
  margin:0;
  align-items:center;
 
}

<div class="container">
        <div class="any-height">
                0
                <br>
                0
        </div>
        <ul class='should-stertch'>
                <li class="">1</li>
                <li class="">2</li>
                <li class="">3</li>
                <li class="">4</li>
        </ul>
</div>

Basically I want to vertically center the numbers in the red boxes.

score 0 · Accepted Answer · answered Feb 08 '23 at 19:38

Use flexbox on the li elements. Have them have display: flex and align-items: center, like this:

.container{
  display:flex;
  border:1px solid orange;
}
li{
  display: flex;
  align-items: center;
  border:1px solid red;
  height:100%;
}
ul{
  list-style:none;
  display:flex;
  margin:0;
  align-items:center;
 
}

<div class="container">
        <div class="any-height">
                0
                <br>
                0
        </div>
        <ul class='should-stertch'>
                <li class="">1</li>
                <li class="">2</li>
                <li class="">3</li>
                <li class="">4</li>
        </ul>
</div>

Align-items aligns the content of the container across the secondary axis. In this case, since flex is a row by default, the vertical axis.

How to center a flex child vertically which has height set to 100%

1 Answers1