如何使用 flex 和 flex-col Tailwind CSS 在 div 中对齐 div答案

【问题标题】：How to align a div within a div using flex and flex-col Tailwind CSS如何使用 flex 和 flex-col Tailwind CSS 在 div 中对齐 div
【发布时间】：2021-10-31 02:22:01
【问题描述】：

我正在尝试将带有白色边框的 div 垂直居中到带有绿色背景的 div 上。颜色只是为了展示。我无法弄清楚为什么 justify-center 和 items-center 不起作用。我知道我可以使用保证金来实现我想要的，但我知道有更好的方法。我曾尝试引用此 SO 帖子，但没有运气：Reference Post

另外，如果有更好的解决方案来实现我想要的，我会全力以赴。

我的代码：

<div class="flex flex-col min-h-screen bg-coolGray-900">
    <div class="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>

【问题讨论】：

您尚未将您的 bg-green-500 类显示为 flex - 当您这样做时它会起作用。
谢谢，就是这样。不得不添加“flex flex-col”。我认为它只会从父级继承“flex flex-col”。如果你想回答它，我会标记它。
不用担心，回答：+1：

标签： css flexbox centering tailwind-css

【解决方案1】：

你没有将你的容器类显示为flex，这就是你的理由不起作用的原因。

将flex 类添加到您的bg-green-500 类中。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<section>
  <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 w-screen">
            <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>
</section>

【讨论】：