行内元素水平居中必须作用于父块级容器，而非子元素自身；text-align: center仅对块级父容器内的行内内容生效，对img、span等行内元素直接设置无效，且不控制垂直对齐。
行内元素居中，只靠子元素自己加样式是没用的——必须操作父容器。
text-align: center 必须作用于父块级元素
给 <span></span>、<a></a>、<img> 这类默认 display: inline 的元素直接写 text-align: center，完全无效。它只对块级容器生效，且作用范围是“让其内部的行内内容水平居中”。
- 正确写法：
.wrapper { text-align: center; }，然后把<img>或文字放在这个<div class="wrapper"> 里 <li>错误写法：<code>img { text-align: center; }—— 浏览器会忽略，因为<img>不是块容器 - 如果父容器本身是
flex或grid，text-align依然有效，但仅影响行内内容（比如纯文本），对 flex 项目或 grid 项无影响 - 常见现象：图片在父容器中看起来“下沉”，尤其和文字混排时
- 解决方法：给
<img>加vertical-align: middle或vertical-align: top - 注意：
vertical-align只对inline和table-cell元素生效，对block或flex子项无效 - 若想彻底摆脱基线干扰，可改用
display: block; margin: 0 auto;，但这已不属于“行内元素居中”范畴 - 单行文本垂直居中：父容器设固定高度 +
line-height等于该高度（例如height: 60px; line-height: 60px;） - 多行文本或无法预知行数时，
line-height方案失效，得换flex或grid（此时父容器不再是纯“块+text-align”逻辑） - 如果父容器用了
text-align: center但内容仍不居中，先检查是否有padding、border或font-size不一致导致视觉偏差
图片作为行内元素时，vertical-align 影响垂直对齐位置
默认情况下 <img> 是行内元素，会和文字基线对齐，导致看起来“偏下”。这不是没居中，而是对齐基准错了。
多行行内内容居中要小心 line-height 和容器高度
text-align: center 只管水平方向；垂直方向上，它不控制位置。如果你希望单行文字在容器中垂直居中，不能只靠 text-align。
真正容易被忽略的是：行内元素的居中永远是“容器驱动”的，不是“元素自洽”的。你改的不是那个 <span></span>，而是它头顶那个 <div>。一旦嵌套层级变深、或父容器用了 <code>flex，text-align 就可能静默失效——这时候得看它是否还处于一个能响应该声明的渲染上下文中。
