TailwindCSS 如何设置全屏维度 DIV 垂直对齐？

要使用 TailwindCSS 将 div 在屏幕中垂直居中对齐，我们可以利用 Tailwind 提供的 Flexbox 或者 Grid 布局工具类。下面将分别介绍两种方法实现垂直居中对齐。

使用 Flexbox

1. 首先，我们需要为父容器添加 flex 类来启用 Flexbox 布局。
2. 然后，使用 items-center 类可以使子元素在垂直方向上居中。
3. 使用 justify-center 类可以使子元素在水平方向上居中。
4. 为了使 Flexbox 布局占满整个屏幕的高度，我们需要添加 h-screen 类，这将设置父容器的高度为视口高度。

下面是一个示例代码：

html
<!-- Flexbox 实现居中的父容器 -->
<div class="flex items-center justify-center h-screen">
  <!-- 居中的内容 -->
  <div class="bg-blue-500 text-white p-8">
    居中的内容
  </div>
</div>

使用 Grid

1. 为父容器添加 grid 类启用 Grid 布局。
2. 使用 place-items-center 类可以同时在垂直和水平方向上居中子元素。
3. 同样，使用 h-screen 类设置父容器高度为视口高度。

示例代码如下：

html
<!-- Grid 实现居中的父容器 -->
<div class="grid place-items-center h-screen">
  <!-- 居中的内容 -->
  <div class="bg-red-500 text-white p-8">
    居中的内容
  </div>
</div>

以上两种方法都能够实现在屏幕中垂直和水平居中对齐 div。在选择哪种方法实现时，可以根据你的具体布局需求和对Flexbox或Grid布局的熟悉程度做出决定。