- Flexbox 弹性盒子（推荐）
div {display: flex;align-items: center; /* 垂直居中 */justify-content: center;/* 水平居中 */height: 300px; /* 需要指定高度 */
}
✅ 现代浏览器首选方案，支持响应式布局
- Grid 网格布局
div {display: grid;place-items: center; /* 同时垂直水平居中 */height: 300px;
}
✅ 代码最简洁，适合现代项目
- 绝对定位 + 平移
div {position: relative;height: 300px;
}
div::before {content: '';display: inline-block;height: 100%;vertical-align: middle;
}
.content {display: inline-block;vertical-align: middle;
}
✅ 兼容性好（支持IE8+）
- 表格布局法
div {display: table-cell;vertical-align: middle;height: 300px;width: 200px;
}
⚠️ 注意：需要设置具体宽度
- Line-height 法（单行文本）
div {height: 100px;line-height: 100px; /* 值与高度相同 */text-align: center; /* 水平居中 */
}
⚠️ 仅适用于单行文本内容
选择建议：
- 现代项目优先使用 Flexbox 或 Grid
- 需要兼容旧浏览器时选择定位法或表格法
- 单行文本可直接用 line-height
- 多行内容推荐 Flexbox/Grid
注意事项：
- 必须为容器设置明确高度
- 如果内容高度超过容器，需要设置
overflow: auto - 移动端布局建议使用 Flexbox
- 图片垂直居中需要设置
display: block
)
