React中Tailwind justify-center失效：小屏幕DaisyUI卡片居中问题

问题出在flex布局的对齐属性使用错误，以及容器宽度设置不当，以下是修复方案：

核心修改点 #

修改包含<MovieCard>的父容器className：

<div className='lg:pl-20 lg:pt-10 h-auto w-full flex flex-col items-center md:flex-row md:justify-between lg:flex-row'>
    <MovieCard />
    <MovieCard />
    <MovieCard />
</div>

原因说明 #

1. w-full替代w-auto：
   原容器w-auto会收缩到子元素的宽度，导致没有多余空间让子元素居中。设置w-full后，容器占满父级可用宽度，为水平对齐提供基础。

2. items-center替代无效的justify-self-center：

   • 在flex-col布局（小屏默认）中，主轴是垂直方向，justify-*系列属性控制垂直对齐，而水平对齐需要用items-*系列属性。items-center会让子元素在水平方向居中，这正是你需要的效果。
   • justify-self-center是Grid布局的属性，在Flex布局中完全无效，必须移除。

3. 断点布局保持：

   • 小屏（默认）：维持flex-col + items-center实现卡片垂直排列且水平居中
   • 中等屏幕（md:）：切换为flex-row + justify-between，保持原有的横向分散布局
   • 大屏幕（lg:）：保持flex-row布局，配合原有的lg:pl-20实现左侧缩进效果

可选优化 #

如果希望小屏幕下卡片之间有间距，可以添加gap类，比如：

<div className='lg:pl-20 lg:pt-10 h-auto w-full flex flex-col items-center gap-4 md:flex-row md:justify-between lg:flex-row'>

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