text-align: center仅控制水平居中且作用于父容器内行内内容，垂直方向因与<span>默认按baseline对齐且受字体、line-height等影响而错位；统一设vertical-align: middle可修复，或直接用flex布局（justify-content:center + align-items:center）彻底规避基线问题。
纯文本和带链接的文本（<a>）混排时，直接套 text-align: center 通常能水平居中，但垂直对齐容易错位——因为 <a> 默认是行内元素，而浏览器对行内元素的基线（baseline）对齐有默认行为，链接文字常比纯文本略高或略低。
为什么 text-align: center 看似生效却不对齐
它只控制水平居中，且作用于父容器内的行内内容；但垂直方向上，<span> 和 <a> 都按 baseline 对齐，而链接可能带下划线、字体粗细不同、或继承了不同 line-height，导致视觉错位。
- 常见现象：纯文本居中，
<a>看起来“飘”在上方或下沉一像素 - 根本原因不是居中失效，而是行内元素的 vertical-align 默认值为
baseline - 如果父容器没设明确
line-height或font-size，不同字体渲染引擎（Chrome/Firefox/Safari）表现还不一致
vertical-align: middle 是最轻量的修复方式
给所有参与混排的行内元素（包括 <span>、<a>、纯文本外层的 <span>）统一加 vertical-align: middle，就能拉齐基线。
- 必须显式写在每个行内子元素上，不能只写在父容器
- 避免用
vertical-align: top或bottom，它们依赖父容器行高，响应式下易偏移 - 如果混排里还有
<img>，同样要加vertical-align: middle，否则图片底部空白会拖低整行 - 示例：
<div style="text-align: center;"> <span style="vertical-align: middle;">纯文本</span> <a href="#" style="vertical-align: middle;">带链接文本</a> </div>
更稳的做法：用 Flex 布局接管整行
当混排内容稍复杂（比如加图标、响应式字号、或未来要加按钮），text-align + vertical-align 就容易漏配。直接升级为 Flex 更可控。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex、justify-content: center（水平）、align-items: center（垂直） - 所有子元素自动变成 flex item，
vertical-align失效，不再受 baseline 干扰 - 注意：
<a>在 flex 容器里默认是块级行为，若需保持行内样式（如不换行、不占满宽），可加display: inline-flex或用flex: none - 兼容性没问题——IE11+ 全支持，旧项目加个
display: -ms-flexbox即可
绝对别踩的坑：别用 margin: auto 或 float
这两个方案对纯文本或单个块元素有效，但混排行内内容时会彻底失效。
-
margin: auto只对块级元素生效，<a>不设display: block就不响应 -
float会让元素脱离文本流，text-align对它无效，且后续清除浮动麻烦 - 有人试过给
<a>加display: inline-block再配margin: 0 auto，结果发现居中只对它自己生效，和旁边文本完全无关
真正难的不是让它们“看起来居中”，而是让不同来源、不同语义的文本在各种缩放、换行、字体加载场景下都保持视觉对齐。Flex 是目前唯一既省心又无副作用的选择；如果必须用行内布局，vertical-align: middle 是唯一值得信任的补丁。其他任何“看起来差不多”的写法，上线后遇到 Safari 或 Windows 字体渲染差异，大概率会露馅。
