如何垂直居中高度设为100%的Flex子元素

要实现你的需求——让红色边框的<li>既和父容器高度一致，同时内部数字垂直居中，只需要调整两处CSS设置：

修改后的完整代码 #

.container{
  display:flex;
  border:1px solid orange;
}
li{
  border:1px solid red;
  /* 把li设为flex容器，实现内部内容垂直居中 */
  display: flex;
  align-items: center;
  /* 可选：如果需要数字水平居中，加上这行 */
  /* justify-content: center; */
}
ul{
  list-style:none;
  display:flex;
  margin:0;
  /* 移除原来的align-items:center，让li自动拉伸填满ul高度 */
  /* align-items: stretch; 这是默认值，也可以省略不写 */
}

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

关键调整说明 #

1. 让li和父容器高度一致：
   原代码中<ul>设置了align-items: center，这会强制<li>以自身内容高度显示，无法拉伸填满<ul>的高度。移除这个属性（或者显式设置为默认的stretch）后，<li>会自动拉伸，匹配<ul>的高度，而<ul>的高度会被左侧.any-height的内容撑开，最终实现和左侧容器等高。

2. 让li内部内容垂直居中：
   给<li>添加display: flex和align-items: center，把<li>变成flex容器，这样它内部的数字就会自动垂直居中。如果还需要数字水平居中，再加上justify-content: center即可。

内容的提问来源于stack exchange，提问作者Senki Sem