text-align: center 必须写在父块级容器上才能居中文本、图片等内联元素；若目标是居中块级元素自身，应使用 margin: 0 auto（需设宽度）或 display: flex。
text-align: center 必须写在父容器上，不是目标元素自己
很多人给 <span> 或 <img> 直接加 style="text-align: center"，结果毫无反应——因为 text-align 不作用于内联元素自身，只作用于**它的父块级容器**，控制的是“里面的内容怎么排”。
它真正影响的对象是：文本、<img>、<span>、<strong> 这类默认 display: inline 的元素，前提是它们被包裹在一个块级父容器里。
- ✅ 正确：
<div style="text-align: center"><span>文字</span><img src="x.jpg"></div> - ❌ 错误：
<span style="text-align: center">文字</span>（无效） - ⚠️ 注意：
<div>本身是块级，但若里面嵌套另一个<div>，那个子<div>不会被text-align居中——它得先变成inline-block或用别的方法
内联元素居中失败的常见原因
即使写了 text-align: center 到父容器，也可能没效果。核心问题往往出在“内容不是内联”或“父容器没起作用”。
- 父容器是
display: flex或display: grid——此时text-align完全被忽略，对齐由justify-content控制 - 父容器高度塌陷（比如只含浮动子元素），导致视觉上“没空间可居中”
- 子元素是块级（如未改写的
<div>、<p>），它会独占一行，text-align只能居中它内部的文字，不是它自己 -
<img>被设了display: block，就脱离了行内流，text-align对它失效
想居中一个内联元素自身？先让它可被 text-align 影响
如果目标是让某个图标、按钮或 <span> 在父容器里水平居中（而不是它里面的字），就得确保它在父容器的行内流中参与对齐。
立即学习“前端免费学习笔记（深入）”；
- 给它加
display: inline-block，这样text-align: center就能把它当“一个字”来居中 - 或者用
display: inline-flex，同样兼容text-align - 避免同时设
float或position: absolute，这两者会让元素脱离常规流，text-align失效 - 不要依赖
vertical-align: middle来水平居中——它只管行内上下对齐，和左右无关
text-align: center 和 margin: 0 auto 的关键区别
这两个常被混用，但机制完全不同，不能互换。
-
text-align: center是“内容对齐”，只对内联级内容生效，不改变布局流 -
margin: 0 auto是“外边距分配”，只对块级、有明确width、且不在 flex/grid 容器里的元素生效 - 给
<span>写margin: 0 auto没用——它不是块级，也没 width 可缩 - 给
<div>写text-align: center却没看到居中？大概率是因为里面没内联内容，或者子<div>没改成inline-block
text-align: center；要居中一个块状 UI 元素（比如卡片、按钮容器），别碰 text-align，直接上 display: flex 或 margin: 0 auto（记得设 width）。混淆这两类目标，是绝大多数居中失败的根源。 
