如何在Tailwind CSS的flex flex-col容器内实现元素垂直水平居中？

你的问题出在外层带背景的div没有设置布局容器属性，导致内层元素只能实现水平居中，但垂直方向无法对齐到整个335px高度的容器中间。完全不用放弃flex布局，只需要简单调整外层div的类即可：

修改后的代码（简化结构版） #

<section id="cta-image-box"
         class="container mx-auto py-24 mt-32 mb-32">
    <!-- 给外层div添加flex布局相关类，直接实现子元素居中 -->
    <div class="h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply flex flex-col items-center justify-center">
        <h5 class="text-5xl font-bold text-white mb-10">
            Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
        </h5>
        <a href="#"
           alt=""
           class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
            Discount Code
        </a>
    </div>
</section>

说明 #

• 外层div有固定高度h-[335px]，添加flex flex-col items-center justify-center后，它会成为flex容器，直接让子元素（h5和链接）在垂直、水平方向都居中对齐
• 删掉了多余的内层嵌套div，简化了结构，效果完全符合需求

保留原嵌套结构的修改方案 #

如果想维持原有的内层div结构，也可以这样调整：

<section id="cta-image-box"
         class="container mx-auto py-24 mt-32 mb-32">
    <div class="h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply flex items-center justify-center">
        <div class="flex flex-col items-center">
            <h5 class="text-5xl font-bold text-white mb-10">
                Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
            </h5>
            <a href="#"
               alt=""
               class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
                Discount Code
            </a>
        </div>
    </div>
</section>

这种方式给外层div添加flex items-center justify-center，让内层div先在整个容器中居中，内层div再通过自身的flex-col维持垂直排列，最终效果和简化版一致。

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