Flexbox设置flex-col时如何垂直对齐元素？React Tailwind卡片居中问题

核心问题 #

外层容器仅设置了flex-col，缺少flex类来启用flex布局，因此所有flex相关的对齐属性都不会生效，这是调整样式后无变化的根本原因。

flex-col下的对齐规则 #

使用flex-col（对应CSS的flex-direction: column）时，主轴和交叉轴确实会互换：

• 主轴为垂直方向：控制垂直方向对齐使用justify-content相关属性，对应Tailwind的justify-*类，垂直居中用justify-center
• 交叉轴为水平方向：控制水平方向对齐使用align-items相关属性，对应Tailwind的items-*类，水平居中用items-center

如果需要实现卡片内部元素完全居中，两个属性都需要配置，同时建议给卡片设置固定最小高度，否则如果容器高度完全由内容撑开，垂直居中的效果不会有明显感知。

修复后代码 #

const Product = ({product}) => {
    return (
        <div className="rounded shadow flex flex-col justify-center items-center overflow-hidden min-h-[320px] w-[240px] p-3">
            <img className="h-36 object-contain mb-4" src={product.image} alt={product.name} />
            <span className="block h-16 text-center">{product.name}</span>
            <span className="block mb-3 font-medium">{product.price}</span>
            <button className="px-4 py-2 bg-green-200 rounded">Add to Cart</button>
        </div>
    )
}

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