text-align: center 是居中文字的唯一正解，仅对块级容器生效；居中容器需用 margin: 0 auto、flex 或 grid 等布局方案，二者不可混淆。
绝大多数文字居中，直接在父块级元素上加 text-align: center 就够了，不用 flex、不用 transform、不碰 margin。 其他方案要么是解决不同问题（比如居中整个盒子），要么是过度设计——90% 的“居中失败”不是代码写错，而是用错了对象或场景。
给 p 或 div 里的文字加 text-align: center 没反应？
这不是 CSS 失效，而是 text-align 被忽略了作用边界：
- 把
text-align: center写在span、a或img这类行内元素上——它只对块级容器生效，写了也白写 - 父容器用了
display: flex，此时justify-content会接管水平对齐，text-align完全不触发 -
p里嵌了float元素或position: absolute图片——这些内容已脱离文本流，text-align管不到 - 误以为要给文字本身加样式，比如
<p><span style="text-align:center">文字</span></p>——没用，得加在p或它的父div上
想让整个 div 在页面里水平居中，不是里面文字
这时你真正要控制的是“盒子位置”，不是“文字排布”。text-align: center 对它完全无效：
立即学习“前端免费学习笔记（深入）”；
- 必须给该
div设置明确宽度，比如width: 400px或max-width: 80%；设成width: 100%就没空间可分，margin: 0 auto不起作用 - 用
margin: 0 auto，不是margin: auto——后者在部分旧浏览器中行为不一致 - 父容器不能是
display: flex或display: grid，否则会覆盖掉auto的计算逻辑 - 如果同时要文字也居中，得额外加一句
text-align: center，它和margin各干各的活，互不干扰
需要水平 + 垂直居中（比如卡片标题、弹窗文案）
单靠 text-align 不行，它只管水平。垂直方向需布局级干预：
- Flex 方案最轻量：
display: flex; justify-content: center; align-items: center;——但父容器高度必须明确（比如height: 200px或min-height: 100vh），否则垂直方向没参照 - Grid 方案更简洁：
display: grid; place-items: center;——现代浏览器支持良好，但 IE 完全不支持 - 绝对定位 +
transform兼容性最好：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);——前提是父容器有position: relative，否则会相对视口定位，滚动就偏移 - 别用
line-height去“凑”垂直居中：它只对单行有效，多行文本会撑开容器或截断
最容易被忽略的一点：很多开发者看到文字没居中，第一反应是“加个 flex”，结果把原本简单的文档流搞复杂了，还引入了 float 失效、vertical-align 失效等副作用。先确认你到底要居中“文字”还是“容器”，再选方案——前者 text-align 是唯一正解，后者才轮到布局属性出手。
