text-align: center 仅对父容器内行内级内容（如 <span>、<img>）水平居中有效，因其作用于文本流；而 margin: 0 auto 仅适用于块级、非浮动、非绝对定位且有明确宽度的元素，对默认 inline 的 <span>、<img> 无效。
直接给父元素加 text-align: center，别动子元素本身。
为什么不能给 <span> 或 <img> 自己设 margin: 0 auto
因为 margin: 0 auto 对行内元素完全无效——它只作用于块级、非浮动、非绝对定位的元素。而 <span>、<img>、<a> 默认都是 display: inline，不接受宽度控制，也不响应 auto 外边距。
常见错误现象：
写了 img { margin: 0 auto; }，但图片纹丝不动；或者加了 display: block 却忘了设 width，结果还是占满整行、看不出“居中”。
- 正确思路永远是：居中行为由父容器决定，不是子元素自己“努力居中”
- 适用范围包括：
<span>、<img>、<em>、<strong>、<button>（默认 inline）等所有行内级元素 - 如果父容器是
<div>且已有其他内容不想被影响，不要全局改它的text-align，而是用一个干净的包裹<div style="text-align:center">
text-align: center 的边界和副作用
这个声明只管水平方向，且仅对“行内流内”的内容生效。它不会让子元素在垂直方向居中，也不会改变子元素自身的 display 类型或尺寸。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 如果父容器高度固定，而里面是单行文字，
text-align: center配合line-height: [same as height]才能同时达成水平+垂直居中；光靠text-align不够 - 如果子元素是
<img>，默认基线对齐（baseline），可能看起来“偏下”，此时加vertical-align: middle更稳妥 - 若父容器用了
flex或grid，text-align会失效——因为子元素已脱离文本流，此时应改用justify-content或place-items
当父容器不能改样式时怎么办
比如你只能修改子元素（如第三方组件内部、CMS 输出的 HTML），又必须让一个 <span> 水平居中，这时可临时提升其显示层级：
- 加
display: inline-block+ 父容器text-align: center（但你仍需控制父容器） - 更现实的做法：用
display: flex包裹子元素，再设justify-content: center，例如：<div style="display:flex; justify-content:center"><span>居中文字</span></div>
- 注意：不要滥用
position: absolute+left: 50%——它会让元素脱离文档流，破坏换行、间距等自然行为，仅适合模态框类场景
真正难的不是写对一行 CSS，而是判断当前上下文是否还属于“文本流”。一旦父容器用了 flex、grid 或 float，text-align 就退场了——这时候该看的是容器的布局模式，而不是子元素类型。
