使用 align-items:center 结合 line-height 可精准实现文本垂直居中；前者基于容器居中内容块，后者通过调整行高匹配容器高度来对齐单行文本视觉中心，多行文本则依赖 flex 布局并避免额外间距，针对不同字体微调 line-height 以达到理想效果。
在使用 CSS Flex 布局时，实现文本垂直居中看似简单，但实际开发中常因行高、字体渲染差异或容器尺寸不明确导致居中效果偏差。虽然 align-items: center 能让子元素整体居中，但如果文本本身存在上下间距不均的问题，仅靠 flex 可能无法完美对齐视觉中心。
align-items:center 的局限性
Flex 布局中的 align-items: center 是基于弹性盒子的主轴对齐方式，它会使整个内容块（包括文字的行框）在交叉轴上居中。然而，文本的“视觉中心”并不总是与行框的几何中心重合，尤其在字体设计偏移明显或行高过大的情况下。
例如：中文字符通常在行高中略微偏上，英文大写字母也可能造成视觉不平衡。此时即使容器已用 flex 居中，文本看起来仍不够“正”。
结合 line-height 精确控制单行文本
对于单行文本，最直接有效的优化方式是将 line-height 与容器高度设为一致。这能强制文本行框的高度等于容器高度，从而实现真正的垂直居中。
立即学习“前端免费学习笔记（深入）”；
示例代码：居中文本
关键点：当容器高度固定时，设置 line-height === 容器高度，再配合 flex 的 align-items:center，可双重保障对齐精度。
多行文本的处理建议
line-height 方法只适用于单行文本。对于多行内容，应完全依赖 flex 布局机制：
- 确保父容器启用 display: flex 和 align-items: center
- 子元素为块级文本时，避免设置过大的 padding 或 line-height
- 必要时使用 ::before 伪元素辅助对齐（老版本浏览器兼容方案）
字体差异的视觉微调
不同字体的基线和字腹位置不同，建议在关键 UI 区域通过开发者工具观察实际渲染效果，适当调整 line-height 数值（如从 1.2 改为 1.0）来贴近视觉居中。
例如某些字体在 line-height:1.2 时底部留白较多，改为 1.0 后更紧凑，配合 flex 居中更自然。
基本上就这些。flex 的 align-items:center 是基础手段，line-height 是精细调节的补充。两者结合，能应对大多数文本垂直居中场景，尤其是按钮、导航项等高频组件。关键是理解文本行框的行为，而不是单纯依赖布局属性。
