最简最稳方案是display: flex + justify-content: center + align-items: center，但父容器必须有可计算高度（如height、min-height或被内容撑开），否则会因高度塌陷导致居中失效。
直接用 display: flex + justify-content: center 和 align-items: center，99% 的场景下这就是最简、最稳、最不需要动脑的解法。
Flex 布局：未知尺寸也能居中，推荐作为默认方案
只要父容器高度明确（比如设置了 height 或撑开内容），子元素无论宽高是否固定、是否响应式、是否换行，都能一招搞定。
常见错误现象：父容器没设 height，子元素又为空或仅含文本，导致父容器高度塌陷，看起来“没居中”——其实是父容器高度为 0。
- 父容器必须有可计算的高度（
height、min-height、或被内容撑开） - 子元素无需设置
position、margin、transform等额外定位逻辑 - IE10+ 支持良好；IE9 及以下不支持，需降级方案
- 若子元素是多行文本，
align-items: center仍有效；text-align: center仅控制行内对齐，别漏加
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 关键：不能省 */
}
.child {
background: #4285f4;
}
绝对定位 + transform：兼容老浏览器，但要注意 transform 偏移基准
当需要支持 IE9 或某些嵌入式 WebView（如旧版 Cordova）时，这个组合仍是可靠选择。核心在于 transform: translate(-50%, -50%) 是相对于自身宽高偏移，不是父容器。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
容易踩的坑：top: 50% 和 left: 50% 定位的是子元素左上角，不是中心点；如果忘记加 transform，元素会右下偏移出界。
- 父容器必须设
position: relative（或其它非static值） - 子元素必须设
position: absolute，且top/left缺一不可 -
transform不触发重排，性能优于负 margin；但旧 Android WebView 需加-webkit-transform - 子元素尺寸可以动态变化（比如文字增减、图片加载后缩放），依然保持居中
.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
absolute + margin: auto：只适用于定宽高，且父容器需四边约束
这个写法看似简洁，但限制极多：子元素必须显式声明 width 和 height（或 max-width/max-height），父容器必须设 position: relative，且子元素必须同时设 top/bottom/left/right 为 0。
为什么常失效？因为一旦子元素用了 flex、grid 或内容溢出，margin: auto 在绝对定位下的垂直方向计算就会退化或失败。
- 子元素不能依赖内容自动撑宽（如
width: fit-content不生效） - 父容器若用
min-height而非固定height，在部分 Safari 版本中可能不触发垂直居中 - IE8 支持，但 IE7 及更早不支持
margin: auto在绝对定位中的垂直行为
.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 120px;
height: 80px;
margin: auto;
}
真正难的不是选哪种方法，而是判断「父容器高度是否可控」和「是否必须兼容已知 bug 的旧环境」——这两个条件一旦模糊，再漂亮的 CSS 也会在某个安卓 4.4 的 WebView 里偏移 2px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
