单行文字垂直居中用 line-height 最快，但仅适用于固定高度容器；多行则必须用 display: flex + align-items: center，并确保父容器有明确高度约束。
单行文字垂直居中：用 line-height 最快，但只适用于固定高度容器
当容器高度确定（比如 height: 40px），直接设 line-height: 40px 就能对齐。原理是行框高度撑满容器，文字自然居中。
常见错误是容器高度不固定（如内容动态、响应式缩放）还硬套 line-height，结果文字“飘”走或换行错位。
- 适用场景：导航栏、按钮、标签等高度可控的 UI 元素
- 注意
line-height会继承，别让子元素意外放大字体行高 - 移动端需防 iOS Safari 对小字号
line-height渲染偏移，建议最小字号 ≥ 12px
多行文字垂直居中：必须用 display: flex + align-items: center
浮动、绝对定位、表格布局在移动端兼容性和维护性都差，flex 是当前最稳解法。
典型翻车点：父容器没设 height 或 min-height，导致 flex 容器塌陷，文字看似没居中——其实是容器自己“没高度”，不是居中失效。
- 父容器必须有明确高度约束（
height、min-height或被上下文撑开） - 避免给子元素设
vertical-align，它对 flex 子项无效 - 若文字需两端对齐，加
text-align: justify，但注意短段落会拉伸空格
iOS Safari 中 flex 居中失效？检查是否漏了 -webkit-box 兼容写法
老版本 iOS（尤其是 iOS 9–11）对 flex 的实现不完整，align-items: center 可能被忽略。
这不是 bug，是历史兼容策略问题。现代项目可不处理，但若仍需支持 iOS 10 以下，得补前缀。
- 只需加一行：
display: -webkit-box;和-webkit-box-align: center; - 不需要加
-webkit-flex，iOS 10+ 已原生支持标准flex - 用
@supports (display: flex)包裹新写法，避免覆盖旧逻辑
文字被截断或底部留白？可能是 font-size 和 line-height 的隐式基线干扰
即使用了 flex 居中，某些字体（尤其自定义 icon font 或中英混排）仍会看起来“偏低”，因为文字实际渲染区域包含上下空白（ascent/descent）。
这不是居中逻辑错了，而是视觉基准和数学中心不一致。强行调 margin-top 治标不治本。
- 优先用
align-items: center+justify-content: center确保数学居中 - 若仍有视觉偏差，微调
padding或用transform: translateY(-1px)（仅限必要时） - 避免用
vertical-align: middle混搭 flex，它对 flex 子项无意义且易引发重排
事情说清了就结束。真正麻烦的从来不是怎么写那几行 CSS，而是判断当前容器有没有被其他样式（比如 overflow: hidden、transform 触发的层叠上下文）悄悄改了渲染行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
