最可靠的是display: flex，但父容器必须有明确高度（如100vh），否则align-items: center视觉无效；兼容方案用position: absolute+transform: translate(-50%,-50%)，需父容器设position: relative。
直接用 display: flex 最可靠，但必须确保父容器有明确高度；否则所谓“居中”只是逻辑成立，视觉上完全没效果。
flex 布局实现垂直居中（现代首选）
核心是父容器启用 display: flex 并设 align-items: center，但仅此不够：
- 父容器必须有可计算的高度——比如
height: 100vh、min-height: 400px，或继承自一个已设高的祖先；若只靠内容撑开，align-items: center会失效 - 如果想同时水平居中，加
justify-content: center - body 作为父容器时，务必先清除默认
margin: 0，否则顶部/底部白边干扰视觉判断 - 子元素无需固定宽高，响应式友好
示例：
body { margin: 0; display: flex; align-items: center; height: 100vh; } .box { width: 200px; height: 100px; background: #4285f4; }
position + transform 实现垂直居中（兼容性更广）
适用于需要支持 IE10+ 或父容器高度动态、但子元素尺寸已知/可预测的场景：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative（否则子元素会相对于 body 定位） - 子元素设
position: absolute; top: 50%; left: 50%，再用transform: translate(-50%, -50%)回拉自身中心 - 漏掉
transform是最常见错误——此时 div 左上角落在父容器中心，不是整体居中 - 即使子元素宽高不固定（如
width: fit-content），translate仍能生效，但需注意回拉基准始终是渲染后的实际尺寸
示例：
.parent { position: relative; height: 300px; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
line-height 法仅限单行文本
这不是真正意义上的“div 居中”，而是利用行内格式化上下文 trick，只对纯文本或 display: inline-block 元素有效：
- 父容器设固定高度 +
line-height等于该高度 +text-align: center - 子元素必须是行内级（
inline或inline-block），块级元素无视line-height - 多行文本、图片、表单控件等直接失效
- 优势是兼容性无敌，连 IE6 都支持
示例：
.parent { height: 60px; line-height: 60px; text-align: center; } .child { display: inline-block; }
真正容易被忽略的点：没有一种方法是“放之四海而皆准”的。flex 看似万能，但一旦父容器高度塌缩，它就静默失效；position + transform 稳定，但依赖定位上下文；line-height 简单，却只服务文本。选哪种，得先看清楚你控制的是谁的高度、内容是否动态、以及最低要兼容到哪个浏览器版本。
