如何忽略TailwindCSS父容器高度，实现标题垂直居中且职位信息居下？

问题核心是当前父容器的items-center属性让整个左侧内容垂直居中，但你需要标题区域保持垂直居中，同时招聘信息显示在标题下方。通过调整布局结构和Flex属性即可实现：

修改后的代码 #

<div class="flex flex-col 2xl:flex-row justify-start w-full md:w-9/12 2xl:w-full 2xl:justify-center min-h-[38rem] h-[88vh] relative">
    <!-- 左侧区域：拆分垂直居中内容与招聘信息模块 -->
    <div class="2xl:min-w-[52rem] 2xl:w-[62rem] flex flex-col h-full">
        <!-- 标题区域：保持垂直居中 -->
        <div class="flex flex-col justify-center flex-grow space-y-8 xl:ml-4">
            <img class="w-6 xl:w-8 transition-all delay-100 ease-in-out" src="Vector.svg" alt="Fluxify Vector">
            <div class="space-y-3">
                <h2 class="font-syne font-medium text-[1.435rem] leading-[1.525rem] lg:text-[1.735rem] lg:leading-[1.825rem] 2xl:text-[1.835rem] 2xl:leading-[2.225rem] line-clamp-3 2xl:line-clamp-2 transition-all delay-100 ease-in-out">Deine Karriere bei uns - Bewerbe Dich noch heute!</h2>
                <p class="font-sura text-md leading-4 md:text-lg 2xl:text-lg text-[#8A8A8A] md:leading-5 2xl:leading-5 line-clamp-4">Bist du Softwareentwickler, Webseitenentwickler, Designer, Konzeptentwickler, Systemadministrator oder kannst du einen anderen Bereich der IT abdecken? Bewirb Dich bei uns - wir bieten Dir als Freelancer Kunden & Aufträge mit fairer Bezahlung.</p>
            </div>
        </div>
        <!-- 招聘信息模块：固定在标题下方 -->
        <div class="xl:ml-4 py-8">
            <x-jobs.offers/>
        </div>
    </div>
    <div class="2xl:flex justify-end w-full hidden" id="right">
        <div class="select-none relative 2xl:left-44">
            <img class="rounded-[1.56rem] min-w-[28.5rem] 2xl:max-w-[38rem]" src="placeholder-01.jpg">
        </div>
    </div>
</div>

关键调整说明 #

• 移除最外层容器的items-center属性，改为移动端flex-col、2xl尺寸下保持flex-row，修正整体布局方向
• 将左侧容器改为flex flex-col h-full，让内部元素按垂直方向分配空间
• 用flex-grow属性包裹标题区域内容，使其自动占满剩余空间，配合justify-center实现垂直居中
• 把<x-jobs.offers/>单独放在下方模块，自然显示在标题区域底部

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