text-align: center 仅对块级容器内的行内内容有效，对块级子元素无效；居中块级元素应使用 display: flex + justify-content: center。
text-align: center 为什么有时不生效
直接给元素加 text-align: center 只对**行内内容（如文字、span、img）有效**，前提是该元素本身是块级容器（比如 div、p），且其宽度明确或占满父容器。常见失效场景包括：
- 目标元素是
inline或inline-block，没设宽度，又没撑开父容器 - 想居中的是块级子元素（如另一个
div），text-align对它无效 - 父容器用了
display: flex，此时text-align被忽略
用工具类实现水平居中：class="text-center"
主流 CSS 工具库（如 Tailwind、Bootstrap）的 text-center 就是封装了 text-align: center。它适合纯文本或行内元素居中：
.text-center {
text-align: center;
}
使用时只需加在包裹文字的容器上：
<div class="text-center"> <p>这段文字会居中</p> <span>这个 span 也会居中</span> </div>
注意：如果里面有个 div 子元素，默认仍左对齐——它不受 text-align 影响，得单独处理。
立即学习“前端免费学习笔记（深入）”；
用 flex 实现真正意义上的内容居中（含块级子元素）
当你要居中的不只是文字，而是按钮、卡片、图标组等块级结构时，display: flex + justify-content: center 才是可靠方案。对应工具类通常是 flex justify-center（Tailwind）或 d-flex justify-content-center（Bootstrap）：
.justify-center {
justify-content: center;
}
.flex {
display: flex;
}
关键点：
- 必须同时设置
display: flex（或inline-flex），否则justify-content无意义 - 只加
justify-content: center仅控制**主轴**（默认为水平）居中；垂直居中需额外加align-items: center - 若子元素是单个块级元素（如
div），它会被拉伸填满剩余空间——除非你设了flex: none或width
示例（水平+垂直居中一个卡片）：
<div class="flex justify-center items-center h-screen"> <div class="bg-gray-100 p-4">居中的卡片</div> </div>
text-center 和 justify-center 混用的典型错误
很多人会这样写：<div class="text-center flex justify-center">，这其实多余且可能出问题：
-
flex已让text-align失效，text-center白加 - 如果子元素是文字，
justify-center已足够；如果是多个span，flex还会让它们排成一行，行为和纯text-align不同 - 更隐蔽的问题：某些 UI 库里
flex类会重置margin或gap，意外影响布局
记住：文本居中优先用 text-center；内容（含块级元素）居中优先用 flex justify-center ——两者定位不同，别叠着用。
最易被忽略的一点：flex 居中依赖父容器有明确高度（尤其垂直居中时），height: 100% 在未设父级高度的场景下常为空转；用 min-height: 100vh 更稳妥。
