Tailwind CSS中如何基于子元素数量水平对齐，让中间元素居中？

问题场景 #

运行以下代码：

<div class="flex justify-between">
  <div>First item</div>
  <div>Second item</div>
  <div>Third item that is very long</div>
</div>
<div class="text-center">A centered item</div>

会发现下方的居中元素和顶部Flex行的中间元素无法对齐，使用justify-evenly也无法解决这个问题，需求是让顶部行的中间元素严格处于屏幕中心位置。

解决方案 #

方法一：Flex布局下强制首尾元素宽度相等

通过计算宽度，让首尾两个元素占据相等的剩余空间，这样中间元素就会自动居中：

<div class="flex justify-between">
  <div class="w-[calc((100%-fit-content)/2)]">First item</div>
  <div>Second item</div>
  <div class="w-[calc((100%-fit-content)/2)]">Third item that is very long</div>
</div>
<div class="text-center">A centered item</div>

原理：calc((100%-fit-content)/2)会让首尾元素平分容器减去中间元素宽度后的剩余空间，确保中间元素处于容器正中心。

方法二：改用Grid布局（更直观）

用Grid将容器划分为3等宽列，中间列的元素居中后自然与下方元素对齐，同时可以给第三列设置右对齐保留原布局的视觉效果：

<div class="grid grid-cols-3">
  <div>First item</div>
  <div class="text-center">Second item</div>
  <div class="text-right">Third item that is very long</div>
</div>
<div class="text-center">A centered item</div>

这种方式代码更简洁，布局逻辑更清晰，适合需要严格对齐中心的场景。

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