混合字号下text-align+line-height无法真正垂直居中，因行高以最大字号为基准、小字号按基线对齐；flex+align-items:center是唯一可靠方案，辅以transform微调。
text-align + line-height 居中在混合字号下会失效
当容器内文字包含不同 font-size（比如标题用 24px、副标用 14px），line-height: 100px 这类“等高法”就不再可靠——浏览器按行盒（line box）规则计算基线，多字号会让行高实际撑开，文字视觉中心上浮或下沉，不是真居中。
常见错误现象：text-align: center 看起来水平没问题，但垂直方向总差几像素；换浏览器或缩放页面后偏移更明显。
-
line-height是作用于整行的，不是单个字；它以最大字号为基准撑高，小字号文字默认按 baseline 对齐，不会自动“居中” - 如果父容器高度固定，
line-height设得略大于容器高，反而可能让文字整体下移 - 响应式字号（如
rem或clamp()）会让问题更隐蔽——开发时看着对，上线后用户缩放就露馅
flex 布局是唯一能真正处理混合字号垂直居中的方案
display: flex + align-items: center 不依赖字体大小或行高，而是基于内容盒（content box）的几何中心做对齐，所以不管里面是 12px 的注释还是 36px 的标题，都能稳定居中。
但要注意两个容易被忽略的细节：
- 子元素必须是块级（
display: block）或显式设display: flex；如果直接放多个span，它们仍是 inline，align-items对单个span无效 - 避免给子元素设
vertical-align—— 它和 flex 的对齐逻辑冲突，在 Safari 旧版里可能触发渲染异常 - 如果容器本身高度由内容撑开（
height: auto），align-items: center仍有效；但若父容器高度来自min-height，IE11 下可能不生效（需加height: 100%回退）
微调混合字号文字的垂直位置只能靠 transform
即使用了 flex，有时仍需像素级修正：比如图标旁带文字的按钮，图标是 16px，文字是 14px，视觉上总觉得图标略高。这时不能动 line-height 或 margin，而要用 transform: translateY() 微调单个元素。
- 只对需要调整的子元素加
transform: translateY(-2px)，不要影响整个 flex 容器 - 避免用
top/position: relative，它会脱离文档流，可能破坏 flex 的换行或对齐逻辑 - 数值优先用
px而非em或%——混合字号下相对单位会放大误差 - 如果涉及动画或频繁重排，
transform比margin性能更好，浏览器能走合成层
别用 margin: auto 实现文字居中
有人试过给 p 或 span 加 margin: 0 auto，发现没效果。这不是 bug，是根本用错了场景：margin: auto 只对**有明确宽度的块级元素自身**生效，它让元素在父容器里水平居中，而不是让元素内部的文字居中。
-
span默认是 inline，margin: auto完全无效 - 哪怕给
p设了width: 200px，margin: 0 auto也只是让这个p块在父容器中居中，里面文字仍需text-align: center控制 - 想靠
margin微调文字垂直位置？不行。垂直方向margin: auto在非绝对定位下不触发居中逻辑
line-height 统管所有字体，也不能指望 margin 理解文字语义。真正可控的只有两个支点：flex 的几何对齐，和 transform 的像素修正。其他方法要么表面凑合，要么换个设备就崩。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
