tailwind-css - 我如何使用 TailwindCSS 将这个 "Content"div 垂直居中？

Question

我想在此处使用 TailwindCSS 将包含“Content”的 div 垂直居中，而不调整 div 的宽度:

<div class="flex h-screen min-h-full flex-col justify-center bg-gray-100">
  <header class="h-10 bg-blue-600 text-white">
    <div class="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
      <div class="pr-16 sm:px-16 sm:text-center">
        <p class="font-small text-white"><span class="md:inline">Header.</span></p>
      </div>
    </div>
  </header>

  <main class="flex-grow place-content-center">
    <div class="mx-auto max-w-6xl pb-10 lg:py-12 lg:px-8">
      <div class="space-y-6 sm:px-6 lg:col-span-12 lg:px-0">
        <div class="min-w-0 flex-1">
          <div class="shadow sm:overflow-hidden sm:rounded-md">
            <div class="bg-white px-4 py-6 sm:p-6">Content.</div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

这是当前的示例:https://play.tailwindcss.com/whHEd0QsMB .

这个 div 如何垂直居中而不改变 div 的宽度调整行为？

Answer 1

我认为您可以将 flex flex-col 添加到主元素，并将 w-full 添加到它的直接后代。

这是一个例子:https://play.tailwindcss.com/kH7OIe6r8x

似乎一旦将 flex 添加到父容器中，内容元素就会折叠，因为它没有最小宽度并且示例中没有足够的内容来强制其宽度展开。