如何在子元素宽度不均的Flexbox父容器中居中中间子元素

嘿，这个问题我做项目时也碰到过！用justify-between的时候，因为子元素宽度参差不齐，中间的元素确实没法自动跑到父容器正中间，不过不用绝对定位也有很优雅的解决办法，给你两个实用方案：

方案一：用Grid布局（推荐，更直观） #

直接把原来的Flex布局换成Grid，Grid在这种「左右贴边+中间居中」的场景下适配性更好，不用纠结子元素的具体宽度：

<div class="grid grid-cols-[auto_1fr_auto] items-center">
  <div class="w-24">Child 1</div>
  <div class="w-28 justify-self-center">Child 2</div>
  <div class="w-20">Child 3</div>
</div>

原理说明： #

• grid-cols-[auto_1fr_auto] 定义了三列：左右两列自适应子元素的宽度，中间列占满父容器剩余的所有空间
• justify-self-center 让中间子元素在自己的列（也就是父容器的水平中心位置）居中对齐，不管左右子元素宽度差多少，它都会稳稳地停在父容器正中间
• items-center 保证三个子元素垂直方向对齐，和原来的Flex效果一致

方案二：继续用Flex布局的技巧 #

如果不想切换到Grid，也可以用Flex的auto margin特性实现，只需要调整子元素的margin设置：

<div class="flex items-center">
  <div class="w-24">Child 1</div>
  <div class="w-28 mx-auto">Child 2</div>
  <div class="w-20 ml-auto">Child 3</div>
</div>

原理说明： #

• 去掉父容器的justify-between，改用margin来控制位置
• mx-auto 给中间子元素设置左右自动margin，它会自动占据左右两侧的可用空间，从而让自己居中
• ml-auto 给第三个子元素设置左侧自动margin，会把它推到父容器的最右侧，和第一个子元素的左对齐形成呼应

这两个方案都不需要用绝对定位，而且能完美满足你的需求——第一个子元素贴左，第三个贴右，中间的精准居中，不管子元素宽度怎么变都能生效。

备注：内容来源于stack exchange，提问作者Keshav