如果说 CSS 历史上一半的泪水是由于 “兼容性” 流下的，那么另一半绝对是因为 “居中” 流下的。
元素居中是网页排版中最高频的需求之一。在 Tailwind CSS 中，我们根据元素的性质（是文字还是盒子）以及容器的性质（是普通容器还是 Flex 容器），可以分为 4 种情况。
Tailwind CSS 文本与行内元素居中
在 Tailwind CSS 中，如果想要让一段文本、一张图片或一个 span 在容器内水平居中，我们只需要使用 “text-center” 这一个类即可。
语法：
text-center说明：
text-center 类名等价于：text-align: center;。
示例 1：文本水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<p class="text-center bg-green-200 p-4">
绿叶网 - 为好教程，全力以赴
</p>
</body>
</html>页面效果如下图所示。
Tailwind CSS 块级元素水平居中
在 Tailwind CSS 中，如果想要让一个块级元素在其父容器中水平居中，我们可以这样做：给该元素固定一个宽度，然后使用 mx-auto 类。
语法：
mx-auto说明：
mx-auto 类名等价于：margin: 0 auto;。
示例 2：块元素水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-64 h-20 bg-blue-400 mx-auto">
</div>
</body>
</html>页面效果如下图所示。
分析：
需要注意的是，mx-auto 生效的前提是当前元素必须要有确定的宽度（如 w-64）。如果没有明确的宽度，此时盒子默认会占满 100% 宽度，也就无所谓居中了。
Tailwind CSS Flex 实现居中
使用 “Flex 布局” 来实现元素居中，是现代前端开发中最推荐的 “终极方案” 之一。它不需要计算宽度，也不管内部是文本还是盒子，就可以轻松实现水平和垂直的 “双重居中”。
语法：
flex
justify-center
items-center说明：
这 3 个类名都是在 “父元素” 上设置的。其中：
flex：等价于 display: flex;。justify-center：等价于 justify-content: center;。items-center：等价于 align-items: center;。
示例 3：Flex 双重居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="flex justify-center items-center w-full h-48 bg-green-100 rounded-xl">
<div class="w-20 h-20 bg-green-500 rounded-lg shadow-lg"></div>
</div>
</body>
</html>页面效果如下图所示。
Tailwind CSS Grid 实现居中
随着现代 CSS 的发展，如果我们仅仅只是想让 “单个元素” 在容器的正中心完美居中，使用 “Grid 布局” 会更加简单。
语法：
grid
place-items-center说明：
我们只需要给父元素加上这两个类名，其内部的单个子元素就会自动水平居中和垂直居中了。
示例 4：Grid 一键居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="grid place-items-center w-full h-48 bg-purple-100 rounded-xl">
<div class="w-20 h-20 bg-purple-500 rounded-lg shadow-lg"></div>
</div>
</body>
</html>页面效果如下图所示。
