如何使用Tailwind CSS的flex与flex-col实现div内子div垂直居中

问题根因 #

justify-center、items-center没有生效，是因为承载绿色背景的div没有开启Flex布局，这两个工具类仅对设置了flex/inline-flex的元素生效。

修复后代码 #

只需给绿色背景div新增flex类即可实现预期效果：

<div class="flex flex-col min-h-screen bg-coolGray-900">
    <div class="flex w-screen justify-center items-center h-screen bg-green-500">
        <div class="text-center text-white border-2">
            <h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
            <h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
            <button class="mx-auto btn btn-learn">Learn More</button>
        </div>
    </div>
</div>

简化实现方案 #

如果没有其他全局布局要求，可直接把布局属性写在外层容器，减少嵌套层级：

<div class="flex justify-center items-center min-h-screen bg-green-500">
    <div class="text-center text-white border-2">
        <h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
        <h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
        <button class="mx-auto btn btn-learn">Learn More</button>
    </div>
</div>

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