单行文本用line-height最快，块级元素用flex最稳妥，绝对定位适合脱离文档流场景，vertical-align不适用于块级元素。
单行文本用 line-height 最快，但只适用于固定高度容器
当容器高度已知且内容仅为单行文字时，line-height 等于容器高度是最轻量的方案。它依赖行内元素的基线对齐机制，本质是拉伸行框高度来“挤”出居中效果。
- 必须确保内容不换行，否则多行会撑高容器，
line-height失效 - 容器需设置明确的
height，不能是auto或由内容撑开 - 文字颜色、字体大小不影响居中逻辑，但若设置了
vertical-align（如top），可能干扰表现
.box {
height: 60px;
line-height: 60px;
text-align: center;
}块级元素用 flex + align-items 最稳妥
对任意子元素（div、img、section等）做垂直居中，现代布局首选 display: flex。它不依赖高度预设，也不要求子元素尺寸已知，兼容性覆盖所有主流浏览器（IE11+ 支持基本用法）。
- 父容器设
display: flex和align-items: center即可垂直居中 - 若还需水平居中，加
justify-content: center - 注意：IE10–IE11 对
flex的某些属性（如flex-wrap）支持不全，但单层居中无问题 - 避免在父容器上同时使用
height: 100%且未给祖先设高度——这会导致计算失败，显示为 0
.container {
display: flex;
align-items: center;
justify-content: center;
height: 300px; /* 需有有效高度 */
}
position: absolute + transform 适合脱离文档流场景
当子元素需要脱离正常流（比如遮罩层、弹窗、图标叠加），且父容器已设 position: relative，可用绝对定位配合位移实现居中。关键在于用 transform: translate(-50%, -50%) 抵消自身宽高的 50%，而非依赖 top/left 百分比（后者以父容器为基准，不能自动适配子元素尺寸）。
- 必须同时设置
top: 50%和left: 50%，再用transform回拉 - 子元素无需设定宽高，
transform会动态计算偏移量 - 若父容器高度为
auto，此法仍有效；但若父容器无高度限制且子元素又很大，可能溢出不可见 - 旧版 Android WebView（4.3 及以下）需加
-webkit-transform前缀
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}不要用 vertical-align: middle 直接居中块级元素
vertical-align 仅对行内元素（span、img）、表格单元格（td）或 display: table-cell 元素生效。直接给 div 设 vertical-align: middle 完全无效——这是初学者最常踩的坑。
立即学习“前端免费学习笔记（深入）”；
- 若坚持用表格语义，可将父容器设为
display: table，子元素设为display: table-cell，再配vertical-align: middle - 但该方案语义混乱、调试困难，且在响应式中易出错，不推荐新项目使用
- 检查失效时，先用浏览器开发者工具确认元素实际
display类型和是否处于行内上下文
真正难的不是选哪种方法，而是判断容器高度是否可控、子元素是否需要保持文档流位置、以及是否要兼容老旧环境。多数情况下，flex 是第一选择；只有在必须支持 IE9 或嵌入式 WebKit（如某些机顶盒）时，才退回 absolute + transform 组合。
