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

Question

我正在尝试将带白色边框的 div 垂直居中到带绿色背景的 div 上。颜色只是为了展示。我不明白为什么 justify-center 和 items-center 不起作用。我知道我可以使用保证金来实现我想要的，但我知道有更好的方法。我试过引用这个 SO 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>

Answer 1

您没有将您的容器 class 显示为 flex，这就是为什么您的证明无效。

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

<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>

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

How to align a div within a div using flex and flex-col Tailwind CSS

css

centering

flexbox

tailwind-css