如何在含可变子项的三元素流体容器中居中第二个元素

红线是bg-emerald-50 div的中心线（添加红线时出现偏差，偏移了20-30像素，但不影响理解）。

重要说明！ bg-blue-200 div内的子项数量可在1到5个之间变动。

我目前的标记代码：

<div className="flex h-16 items-center justify-between bg-emerald-50">
  <div className="bg-teal-200">Hello</div>
  <div className="bg-orange-300">to</div>
  <div className="flex bg-blue-200 text-2xl">
    <div className="bg-pink-500">div1</div>
    <div className="bg-amber-200">div2</div>
    <div className="bg-lime-200">div3</div>
    <div className="bg-indigo-200">div4</div>
    <div className="bg-fuchsia-200">div5</div>
  </div>
</div>

试过给“to”div做绝对定位，但这种方式显得取巧，不够优雅。之前见过类似的三栏布局对齐问题，但那个场景里没有右侧这种子项数量可变的嵌套div。

解决方案 #

方案一：Grid布局实现

把最外层容器改成Grid布局，通过自定义列宽让中间栏始终居中，不受左右内容宽度影响：

<div className="grid h-16 grid-cols-[auto,1fr,auto] items-center bg-emerald-50">
  <div className="bg-teal-200">Hello</div>
  <div className="bg-orange-300 flex justify-center">to</div>
  <div className="flex bg-blue-200 text-2xl">
    <div className="bg-pink-500">div1</div>
    <div className="bg-amber-200">div2</div>
    <div className="bg-lime-200">div3</div>
    <div className="bg-indigo-200">div4</div>
    <div className="bg-fuchsia-200">div5</div>
  </div>
</div>

• grid-cols-[auto,1fr,auto] 定义三列：左右列根据内容自动适配宽度，中间列占满剩余空间
• 给中间的“to”div加justify-center，让它在中间列的中心位置，也就是整个容器的中心线位置

方案二：Flex布局实现

通过Flex的弹性分配空间，让中间栏填充剩余区域并居中内容：

<div className="flex h-16 items-center bg-emerald-50">
  <div className="bg-teal-200">Hello</div>
  <div className="flex-1 flex justify-center">
    <div className="bg-orange-300">to</div>
  </div>
  <div className="flex bg-blue-200 text-2xl">
    <div className="bg-pink-500">div1</div>
    <div className="bg-amber-200">div2</div>
    <div className="bg-lime-200">div3</div>
    <div className="bg-indigo-200">div4</div>
    <div className="bg-fuchsia-200">div5</div>
  </div>
</div>

• flex-1 给中间的容器分配所有剩余空间
• 中间容器内部用justify-center让“to”div居中，左右栏保持自身内容宽度，完全适配右侧子项数量变化

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