text-center 用于纯文本水平居中，轻量且语义清晰；需 flex+items-center+justify-center 实现垂直+水平居中；多元素二维布局优先选 grid place-items-center。
文字水平居中用 text-center 最直接
块级元素内纯文本水平居中，text-center 是最轻量、语义最清晰的方案。它本质是设置 text-align: center，不改变文档流，也不影响子元素布局。
常见错误是给文字容器加 flex 和 justify-content-center 却忘了设 width 或父容器约束，导致“居中失效”——其实不是失效，是容器本身撑满全宽，视觉上没变化。
适用场景：标题、段落、按钮文字、卡片说明等常规文本块。
- 对单行或多行文本都有效
- 不干扰行高、字间距等原有样式
- 与
font-size、text-gray-700等其他文字类组合无冲突
需要同时垂直+水平居中时才用 flex
当文字在某个固定尺寸容器（比如 h-32 w-32 的卡片）里既要上下又要左右居中，text-center 就不够了——它只管水平，不管垂直。这时候必须用 Flex 布局。
关键不是加 flex，而是配齐三个工具类：flex + items-center + justify-center。漏掉任意一个都会出问题：
-
flex：把容器变成 flex 根容器（否则items-center无效） -
items-center：控制交叉轴（默认是 y 轴）居中 → 实现垂直居中 -
justify-center：控制主轴（默认是 x 轴）居中 → 实现水平居中
注意：如果容器没有明确高度（如 h-24），或内部内容高度超出容器，items-center 可能表现异常——它依赖容器有可计算的交叉轴长度。
flex 居中时容易忽略的两个坑
一是子元素被意外拉伸。默认 flex 下子项会应用 flex: 1 1 auto，如果文字外还包了一层 span 或 div，可能被撑开、换行甚至溢出。解决方法是给该子元素加 flex-shrink-0 或显式设 flex-none。
二是响应式断裂。比如在小屏下你希望取消 flex 居中、改回顶部对齐，但只写了 md:flex md:items-center md:justify-center，结果移动端仍残留 flex ——因为 flex 本身没被重置。正确做法是补上 md:flex 的反向断点，例如 flex md:flex 不行，得写 flex md:flex md:items-center md:justify-center 并确保非 md 下没其他 flex 类干扰。
另一个隐蔽问题是行内元素（如 a、span）直接套 flex 类无效——Flex 布局只对块级容器起作用。若父元素是 inline，先加 inline-flex 或改成 block。
什么时候该选 grid 而不是 flex
如果容器里不止一行文字，还有图标、徽标、操作按钮等多维度排列需求，硬用 flex 嵌套容易失控。此时 grid 更稳：grid place-items-center 一行搞定垂直+水平居中，且天然支持二维布局。
place-items-center 是 justify-items-center align-items-center 的缩写，对 grid 容器生效；而 flex 的 items-center 是针对交叉轴的，概念不同，不能混用。
性能上无明显差异，但可维护性更强：增减子元素不用反复调 flex 的 order 或 margin 抵消；响应式也更直观，比如 grid-cols-1 md:grid-cols-3 配合 place-items-center，文字始终居中，列数自动切换。
不过要注意：IE11 不支持 place-items，如需兼容得回退到 justify-items: center; align-items: center; 写法，或继续用 flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
