如何在 Tailwind CSS 中全屏垂直对齐 div？

在 Tailwind CSS 中，有若干种方式可以实现全屏垂直对齐 div。

使用 Flexbox

Flexbox 是一个用于布局的 CSS3 属性集，可以在 Tailwind CSS 中使用。使用 Flexbox 实现全屏垂直对齐 div 可以按照以下方式进行：

<div class="h-screen flex items-center justify-center">
  <div class="bg-gray-300 p-6 rounded-lg">
    <h2 class="text-lg font-medium mb-2">示例标题</h2>
    <p class="mb-4">这是示例段落。</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">示例按钮</button>
  </div>
</div>

注：

• .h-screen 样式设置了 div 的高度为屏幕高度。
• .flex 样式将 div 设置为 flexbox 容器。
• .items-center 样式将 flexbox 容器中的子元素（div）沿纵向垂直居中。
• .justify-center 样式将 flexbox 容器中的子元素（div）沿横向水平居中。

使用 Grid

Grid 也是一个用于布局的 CSS3 属性集，同样可以在 Tailwind CSS 中使用。使用 Grid 实现全屏垂直对齐 div 可以按照以下方式进行：

<div class="grid h-screen place-items-center">
  <div class="bg-gray-300 p-6 rounded-lg">
    <h2 class="text-lg font-medium mb-2">示例标题</h2>
    <p class="mb-4">这是示例段落。</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">示例按钮</button>
  </div>
</div>

注：

• .h-screen 样式设置了 div 的高度为屏幕高度。
• .grid 样式将 div 设置为 grid 容器。
• .place-items-center 样式将 grid 容器中的子元素（div）沿纵向垂直居中。

使用绝对定位

使用绝对定位实现全屏垂直对齐 div 可以按照以下方式进行：

<div class="relative h-screen">
  <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-300 p-6 rounded-lg">
    <h2 class="text-lg font-medium mb-2">示例标题</h2>
    <p class="mb-4">这是示例段落。</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">示例按钮</button>
  </div>
</div>

注：

• .relative 样式使父级 div 成为相对定位的容器。
• .absolute 样式使子元素（div）成为绝对定位的元素。
• .top-1/2 和 .left-1/2 样式将子元素（div）“拉至”容器中央。
• .transform 样式使绝对定位的子元素（div）固定在容器中央。
• .bg-gray-300、.p-6、.rounded-lg 等样式仅为了美化 div。

以上三种方式均可以实现全屏垂直对齐 div，开发者可以根据实际需求调整使用方式。