在CSS中，实现垂直居中的方法有多种，每种方法适用于不同的场景。以下是常见的垂直居中方式及其实现原理和适用场景：
1. Flexbox 布局（推荐）
原理：通过父容器的 display: flex 和 align-items: center 实现垂直居中。
代码：
.parent {
display: flex;
align-items: center; /* 垂直居中 */
/* 水平居中可加：justify-content: center; */
}优点：
现代布局首选，代码简洁。
支持动态高度，无需固定尺寸。
适用场景：几乎所有现代浏览器支持的布局场景。
2. Grid 布局
原理：使用 display: grid 和 align-items: center 或 place-items: center。
代码：
.parent {
display: grid;
align-items: center; /* 垂直居中 */
/* 或同时水平垂直居中：place-items: center; */
}优点：
功能强大，可同时控制水平和垂直居中。
适合复杂网格布局。
适用场景：二维布局（如卡片、网格系统）。
3. 绝对定位 + Transform
原理：子元素绝对定位，top: 50% 后通过 transform: translateY(-50%) 向上偏移自身高度的一半。
代码：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}优点：
无需知道子元素高度。
兼容性较好（IE9+）。
适用场景：脱离文档流的元素居中（如弹窗、浮动元素）。
4. 绝对定位 + Margin
原理：子元素绝对定位，top: 50% 后通过负 margin-top（需已知子元素高度）调整。
代码：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px; /* 必须固定高度 */
margin-top: -50px; /* 高度的一半 */
}缺点：
需要固定子元素高度。
适用场景：高度固定的元素居中。
5. Line-Height 法（单行文本）
原理：父容器设置 line-height 等于自身高度，使单行文本垂直居中。
代码：
.parent {
height: 100px;
line-height: 100px;
}缺点：
仅适用于单行文本。
适用场景：按钮、标题等单行文本居中。
6. Table-Cell 模拟
原理：父容器设为 display: table-cell，配合 vertical-align: middle。
代码：
.parent {
display: table-cell;
vertical-align: middle;
height: 200px; /* 需固定高度 */
}优点：
兼容旧浏览器（IE8+）。
缺点：需固定高度，且会破坏原有布局。
适用场景：兼容性要求高的项目。
7. Padding 均分法
原理：父容器设置相等的上下 padding，挤压子元素到中间。
代码：
.parent {
padding-top: 50px;
padding-bottom: 50px;
}缺点：
需已知父容器高度，且会改变布局空间。
适用场景：高度固定的容器内居中。
8. 伪元素 + Inline-Block
原理：父容器用伪元素撑开高度，子元素设为 inline-block 并 vertical-align: middle。
代码：
.parent {
height: 200px;
text-align: center; /* 水平居中 */
}
.parent::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.child {
display: inline-block;
vertical-align: middle;
}优点：
兼容性好（IE8+）。
适用场景：需要兼容旧浏览器的多行内容居中。
总结对比
推荐选择
现代项目：优先使用 Flexbox 或 Grid。
兼容旧浏览器：选择 绝对定位+Transform 或 伪元素+Inline-Block。
单行文本：直接用 Line-Height。
固定高度元素：绝对定位+Margin 或 Padding。
根据实际需求选择最合适的方法！