文字垂直居中需依场景选择方案：单行用line-height=height；多行用flex并设明确高度；表格用vertical-align:middle；兼容旧IE用position+transform，关键均在父容器高度与子元素display类型匹配。
文字垂直居中不是靠 text-align 能解决的——它只管水平方向，垂直方向必须靠布局机制介入。
单行文字：用 line-height 最快，但有硬限制
当容器高度固定、内容确定为单行时，line-height 是最轻量的解法。
-
line-height必须等于容器的height（比如都是48px），否则视觉上不居中 - 容器不能设
overflow: hidden以外的截断方式，否则换行文字会被裁掉 - 字体大小变化会间接影响行高计算，如果父元素用了
em或rem，line-height值可能失效 - 示例：
div { height: 48px; line-height: 48px; text-align: center; }
多行或动态内容：必须用 display: flex
现代项目里这是默认选择，但容易漏掉关键前提。
- 父容器必须有明确高度（
height或min-height），否则align-items: center没参考系 - 必须同时写
justify-content: center（水平）和align-items: center（垂直），缺一不可 - 子元素如果是
span等 inline 元素，建议加display: block，避免基线对齐干扰 - IE11 对
min-height在 flex 容器里的支持有 bug，必要时改用height: 100%回退 - 示例：
.box { display: flex; justify-content: center; align-items: center; height: 200px; }
表格单元格：用 vertical-align: middle，别碰 valign
vertical-align 是专为 <td> 和 <th> 设计的，但生效条件很具体。
立即学习“前端免费学习笔记（深入）”；
-
valign="middle"已被 HTML5 废弃，React/Vue 中直接忽略，必须用 CSS 写 - 单元格必须有可感知的高度——光靠
line-height不够，得靠padding或显式height - 如果
<td>里嵌了<div>或<p>，vertical-align失效，此时要给<td>加display: flex - 示例：
td { vertical-align: middle; text-align: center; padding: 12px; }
兼容 IE9–10：用 position: absolute + transform
这个组合至今仍可靠，但写错一个地方就偏移。
- 父容器必须设
position: relative，否则top/left会相对于整个页面定位 - 子元素必须写全
top: 50%; left: 50%; transform: translate(-50%, -50%)，漏掉transform就只是左上角贴中心 - 不要和
margin: auto混用——绝对定位下它只对宽高固定的块级元素有效，且需四边都设偏移（top/right/bottom/left） - 响应式文字宽度变化时仍可用，但频繁重排会影响性能，慎用于动画场景
真正卡住人的从来不是方法本身，而是“为什么写了却没效果”——绝大多数问题出在父容器缺少高度、子元素 display 类型不匹配，或者把 vertical-align 错用在非表格元素上。
