text-align: center 不生效主因是父容器未撑开宽度；需检查父元素尺寸、显示模式及是否被更高优先级样式覆盖，Flex布局需先设 display: flex 才生效。
HTML 里 text-align: center 不生效？检查父容器宽度
文字没居中，大概率不是写错了样式，而是父元素没撑开。比如 <div> 默认是块级但宽度自适应内容，如果里面只有行内元素（如纯文本、<span>），它实际宽度就只有一行字那么宽，text-align: center 当然看不出效果。
实操建议：
- 用浏览器开发者工具选中目标文字，看 computed 样式里
text-align是否被继承、是否被更高优先级规则覆盖 - 给父容器加个临时
border: 1px solid red，确认它的视觉范围——常会发现它窄得离谱 - 若父容器是
<div>且没设宽高，加width: 100%或width: fit-content再试
Flex 布局居中比 text-align 更可靠，但别漏掉 display: flex
想让整块区域（不止文字）水平+垂直都居中，text-align 就不够用了。Flex 是更直接的解法，但新手常卡在第一步：忘了给父容器设 display: flex。
常见错误现象：justify-content: center 和 align-items: center 写了，但完全没反应。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 必须同时设置父容器
display: flex，否则两个对齐属性无效 - 如果子元素是单行文本，
justify-content: center就够；需要上下居中，才加align-items: center - 注意
flex会让子元素变成 flex item，默认align-items: stretch，可能意外拉高高度
行内元素居中，text-align 管用；块级元素居中，得用其他方法
text-align: center 只影响**行内内容**在块级容器里的水平位置。它不能把一个 <div> 自身居中——那是“块级元素居中”问题，和文字居中不是一回事。
使用场景区分：
- 想让段落里所有文字居中 → 给
<p>或<div>加text-align: center - 想让一个按钮（
<div>或<button>）在页面中间 → 得用margin: 0 auto（需设宽度）、Flex 或绝对定位 - 想让图标 + 文字整体居中 → 把它们包进一个块级容器，再对这个容器用
text-align: center
移动端或旧版 Safari 里 text-align: center 失效？试试加 -webkit-text-align-last
极少数情况，比如文本最后一行特别短，或用了 text-justify，Safari 可能不按预期居中。更隐蔽的是：某些 CSS 重置库（如 normalize.css）会默认设 text-align-last: auto，干扰居中效果。
实操建议：
- 遇到 Safari/WebKit 内核下异常，加一行
-webkit-text-align-last: center - 检查是否有全局样式设置了
text-align-last，它会覆盖text-align对最后一行的控制 - 这不是常规操作，仅当明确复现于 WebKit 且排除其他原因后才加
真正容易被忽略的点：居中从来不是单一属性的事，它永远依赖上下文——父容器的显示模式、尺寸、是否参与 BFC，子元素的类型和盒模型。调不通时，先看父元素的 border 和 computed 样式，比反复改 text-align 有用得多。
