4月30日

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

1. 单行文本垂直居中（行高 line-height）
   适用：只有一行文字、盒子高度固定
   原理：让 行高 = 盒子高度，文字自动垂直居中
   .box {
   width: 200px;
   height: 60px; /* 固定高度 /
   line-height: 60px; / 必须等于高度 */
   background: #eee;
   }

单行文字垂直居中

2. 固定高度盒子：单行 + 多行都居中（Flex 方法 ✅ 最推荐） 适用：盒子高度固定，里面文字不管一行、多行都能完美垂直居中 原理：弹性布局，一行代码搞定垂直 + 水平居中 .box { width: 200px; height: 120px; /* 固定高度 */ display: flex; /* 开启弹性布局 */ align-items: center;/* 垂直居中 */ justify-content: center; /* 水平居中（可选） */ background: #eee; }

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

3. 不固定高度盒子：单行 + 多行都居中（Padding 方法） 适用：盒子没有固定高度，靠内容撑开 原理：上下内边距相等，自然实现视觉垂直居中 优点：兼容性最好、最简单 .box { width: 200px; padding: 20px 0; /* 上下内边距相等，无固定高度 */ background: #eee; }

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

快速记忆表

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