4月30日

CSS 垂直居中最全方案（3 种核心场景）

1. 单行文本垂直居中（行高 line-height）
   适用：只有一行文字、盒子高度固定
   原理：让 行高 = 盒子高度，文字自动垂直居中

单行文字垂直居中

2. 固定高度盒子：单行 + 多行都居中（Flex 方法 ✅ 最推荐） 适用：盒子高度固定，里面文字不管一行、多行都能完美垂直居中 原理：弹性布局，一行代码搞定垂直 + 水平居中

这是多行文本
用 Flex 垂直居中
非常好用

3. 不固定高度盒子：单行 + 多行都居中（Padding 方法） 适用：盒子没有固定高度，靠内容撑开 原理：上下内边距相等，自然实现视觉垂直居中 优点：兼容性最好、最简单

不固定高度盒子
靠 padding 垂直居中

快速记忆表

场景 最佳方案
单行文本 + 固定高度 line-height = height
固定高度 + 单行 / 多行 Flex（align-items: center）
不固定高度 + 所有文本 上下 padding 相等
总结
单行固定高 → 行高法
固定高、多行 → Flex 法（最通用）
不固定高 → Padding 法（最简单）