flexbox垂直居中最可靠但需父容器有明确高度；line-height仅适用于单行纯文本；二者机制不同不可混用；动态内容下absolute+transform更稳妥。
flexbox 实现垂直居中：父容器必须设高度
用 display: flex 垂直居中最可靠，但前提是父容器有明确高度（比如 height: 400px 或 min-height: 100vh），否则 align-items: center 可能无效或表现异常。
常见错误是只写 align-items: center 却没给父元素设高，导致子元素“看起来没动”。justify-content: center 要配合使用才能同时水平+垂直居中。
- 父元素加
display: flex; align-items: center; justify-content: center; - 子元素无需设置
margin、position或transform - 若子元素是块级且含多行内容，
align-items居中的是整个块框，不是文字基线 - 注意 IE10–11 对
flex的部分属性支持不一致（如align-items: center在 IE11 中对min-height容器有时失效）
line-height 实现垂直居中：仅限单行纯文本
line-height 居中本质是让行高撑满容器高度，使单行文本的基线在视觉上居中。它只适用于**纯文本、单行、无换行、无内边距/边框干扰**的场景。
一旦子元素是 立即学习“前端免费学习笔记（深入）”； 两者底层机制完全不同： 典型误操作：父元素写 遇到内容高度不确定（比如用户输入的富文本、图片宽高未知）、需要适配折叠屏或 Safari 某些版本 flex 行为异常时， 真正容易被忽略的是：居中目标是否“稳定可测量”。如果子元素本身高度会随内容伸缩（比如一段带 padding、用了 font-size 缩放或设置了 vertical-align，就极易错位。它不是真正的“元素居中”，而是行盒（line box）的视觉巧合。height: 60px; line-height: 60px;，子元素为 或 inline 或 inline-block（默认 div 是 block，需加 display: inline-block）padding 混用——比如 height: 60px; padding: 10px; line-height: 60px 会导致实际行高溢出line-height 是固定值，无法随字体缩放自动调整
为什么不能混用 flex 和 line-height 居中逻辑
flex 是布局模型，基于主轴/交叉轴重新计算位置；line-height 是行内格式化上下文（IFC）中的行盒控制参数。强行在一个容器里既设 display: flex 又设 line-height，后者会被忽略（flex 容器中子元素不参与 IFC）。display: flex; line-height: 100px;，以为能“双重保险”，结果 line-height 完全不起作用。
line-height 只影响其内部文本行高，不影响自身在 flex 轴上的位置inline-block 且父元素是 flex，则该子元素按 flex item 渲染，不再受父级 line-height 约束line-height 是否被标记为 “not applicable”移动端或动态内容下的实际取舍
flex 并非万能。此时更稳妥的做法是用 position: absolute + transform: translate(-50%, -50%)，虽然代码略多，但兼容性和可控性更高。
position: relative，子元素设 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
line-height 更通用，比 flex 更少受父容器尺寸限制position: relative 不被祖先的 transform 或 will-change 截断包含块em 单位的段落），那任何依赖固定值的方案都可能在字体缩放、系统字号调整时偏移——这时候得结合 @media (prefers-reduced-motion) 或 JS 测量回退。
