如何让Tailwind Grid换行后的子元素居中对齐？

要实现动态子项数量下，换行至新行的Grid子项居中对齐，只需在你的Tailwind CSS容器类中添加justify-items-center即可：

.items-body {
    @apply grid gap-10 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-items-center;
}

这个类会让所有Grid子项在各自的网格单元格内水平居中，无论是满行还是最后一行数量不足的情况，都能保持子项居中对齐，完全匹配你预期的布局效果。

如果你的子项需要保持固定宽度（而非占满单元格），这个方案可以直接生效；如果子项原本是占满单元格宽度的，你可以给子项单独设置宽度限制，比如给子项添加max-w-sm w-full类，再配合容器的justify-items-center，同样能实现居中效果。

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