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 居中本质是让行高撑满容器高度，使单行文本的基线在视觉上居中。它只适用于**纯文本、单行、无换行、无内边距/边框干扰**的场景。
一旦子元素是 <div>、含 padding、用了 font-size 缩放或设置了 vertical-align，就极易错位。它不是真正的“元素居中”，而是行盒（line box）的视觉巧合。
立即学习“前端免费学习笔记（深入）”；
- 父元素设
height: 60px; line-height: 60px;，子元素为<span>或<div>且无其他影响行高的样式 - 子元素必须是
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 完全不起作用。
- flex 容器中，子元素的
line-height只影响其内部文本行高，不影响自身在 flex 轴上的位置 - 若子元素是
inline-block且父元素是 flex，则该子元素按 flex item 渲染，不再受父级line-height约束 - 调试时可用浏览器开发者工具检查 computed 样式，确认
line-height是否被标记为 “not applicable”
移动端或动态内容下的实际取舍
遇到内容高度不确定（比如用户输入的富文本、图片宽高未知）、需要适配折叠屏或 Safari 某些版本 flex 行为异常时，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 测量回退。
