HTML 在全屏 div 中使用 Tailwind CSS 实现垂直对齐

在本文中，我们将介绍如何利用 HTML 和 Tailwind CSS 在全屏 div 中实现垂直对齐。

阅读更多：HTML 教程

1. HTML 基本结构

首先，我们需要创建一个包含全屏 div 的基本结构。我们需要添加以下 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Align with Tailwind CSS</title>
    <link rel="stylesheet" href="https://cdn.tailwindcss.com/2.2.15/tailwind.min.css">
</head>
<body>
    <div class="h-screen flex items-center justify-center">
        <h1 class="text-4xl font-bold">垂直对齐内容</h1>
    </div>
</body>
</html>

在上述代码中，我们使用了 Tailwind CSS 的样式表，并创建了一个具有全屏高度的 div，其中的标题元素将用于垂直对齐。

2. 使用 Tailwind CSS 实现垂直对齐

接下来，我们将利用 Tailwind CSS 提供的一些辅助类来实现垂直对齐功能。我们可以使用 flex 和 items-center 类来将内容垂直居中。

修改我们创建的 div 元素的 class 如下：

<div class="h-screen flex items-center justify-center">
    <h1 class="text-4xl font-bold">垂直对齐内容</h1>
</div>

这样，标题元素将在全屏 div 的中心垂直对齐。

3. 示例

我们来看一个具体的示例。假设我们要实现一个全屏的欢迎页面，其中包括一个标题和一个按钮，标题需要在页面的中间垂直对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome Page</title>
    <link rel="stylesheet" href="https://cdn.tailwindcss.com/2.2.15/tailwind.min.css">
</head>
<body>
    <div class="h-screen flex items-center justify-center">
        <div class="text-center">
            <h1 class="text-4xl font-bold">欢迎来到我们的网站</h1>
            <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded">了解更多</button>
        </div>
    </div>
</body>
</html>

在上述代码中，我们创建了一个包含标题和按钮的 div，使用了 Tailwind CSS 的辅助类来实现内容的垂直对齐。标题使用了 text-4xl 和 font-bold 类，按钮使用了 mt-4、px-4、py-2、bg-blue-500、text-white 和 rounded 类。