如何让元素在拥有更高同级元素时实现垂直居中？

嗨，我懂你遇到的这个困扰——当列表项高度不固定时，要让左侧的数字垂直居中确实容易踩坑。你之前用position: relative; top: 50%;没效果，主要有两个原因：

1. 你的.list-1-num设置了float: left，浮动元素会脱离正常文档流，相对定位的参考逻辑会变得混乱；
2. 只设置top: 50%只会让元素向下偏移父元素高度的一半，但没有向上偏移自身高度的一半，自然没法真正居中。

最简洁可靠的解决方案是用Flexbox布局，它天生就能轻松处理动态高度的对齐需求，不需要手动计算任何数值。

修改后的完整代码： #

HTML（不需要改动，保持原样即可）

<ul class="list-1"> 
  <li> 
    <div class="list-1-num"> 3 </div> 
    <div class="list-1-content list-1-content-signup"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, lectus cursus cursus elementum. 
    </div> 
  </li> 
</ul>

CSS（关键修改点已标注）

.list-1 { 
  font-size: 20px; 
  list-style: none; 
} 

.list-1 li { 
  margin-bottom: 70px; 
  overflow: hidden; 
  text-align: left; 
  list-style: none; 
  /* 核心修改：开启flex布局，并设置垂直居中 */
  display: flex;
  align-items: center;
} 

.list-1-num { 
  /* 移除float: left，flex子元素不需要浮动 */
  font-size: 25px; 
  margin-right: 20px; 
} 

.list-1-content { 
  background-position: 0 50%; 
  background-repeat: no-repeat; 
  background-size: 45px 40px; 
  /* 移除float: left */
  width: 300px; 
  line-height: 25px; 
}

为什么这个方法有效？ #

当给父元素<li>设置display: flex后，它的子元素会变成flex项目，align-items: center属性会让所有flex项目在垂直方向（交叉轴）上居中对齐——不管右侧内容的高度怎么变化，左侧的数字都会自动跟着垂直居中，完美适配动态高度的场景。

如果因为兼容性问题不能用Flexbox，也可以用inline-block+vertical-align: middle的方案，但Flexbox是目前最推荐的现代布局方式哦～

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