最可靠方案是 display: flex + justify-content: center + align-items: center；兼容 IE10 以下才用 position: absolute + transform: translate(-50%, -50%)，且父容器需设 position: relative；text-align + line-height 仅适用于单行内联内容。
直接说结论：用 display: flex + justify-content: center + align-items: center 是当前最可靠、代码最少、行为最可预期的方案；如果必须兼容 IE10 以下，才考虑 position: absolute + transform: translate(-50%, -50%)，但得手动确保父容器有 position: relative。
flex 布局居中：父容器设 flex，子元素零配置
这是现代项目首选。只要父容器能加 display: flex，子元素连 width、height、margin 都不用写，哪怕它是 <img alt="HTML父子元素宽高皆不固定时怎么实现居中" >、<svg></svg> 或一堆文字，都能自动水平+垂直居中。
- 父容器必须有明确高度（比如
height: 100vh或继承自 body 的height: 100%），否则align-items: center没效果 - 子元素不能是
float或position: absolute，否则会脱离 Flex 流，居中失效 - 多个子元素会并排居中；如需竖排，加
flex-direction: column - IE10 支持部分 flex 属性，但
align-items在 IE10 中需加-ms-前缀，IE9 及以下完全不支持
absolute + transform：老项目兜底方案，但定位上下文容易漏
当父容器无法设 flex（比如要兼容 IE8/9），就得靠绝对定位。核心是让子元素先到父容器中心点，再用 transform 自己“退半步”。
- 父容器必须显式设置
position: relative（或absolute/fixed），否则top: 50%和left: 50%会相对于视口定位，一滚动就偏移 - 子元素必须设
position: absolute，且同时写top: 50%、left: 50%、transform: translate(-50%, -50%) - IE9+ 支持
transform，IE8 及以下不支持，只能退回到table或 JS 计算 - 这个方法不依赖子元素宽高，也不影响其他元素流，适合模态框、加载提示这类脱离文档流的场景
text-align + line-height + vertical-align：仅限单行内联内容
如果你只是想让一段文字或一个图标在块级容器里居中，且内容只有一行，可以用这个组合——但它不是真正意义上的“元素居中”，而是利用行内格式化上下文做视觉对齐。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
text-align: center（水平） +line-height: [父高]（垂直），子元素设vertical-align: middle - 父容器高度必须是固定值（比如
line-height: 200px），且子元素不能换行，否则line-height失效 -
vertical-align对块级元素无效，只对inline或inline-block元素起作用 - 实际中容易和
font-size、padding冲突，调试起来比 flex 或 transform 更难预测
真正麻烦的不是选哪种方法，而是忽略父容器的高度来源和定位上下文——flex 要高度，absolute 要 position: relative，这两个条件漏掉任何一个，代码看着没错，页面就是不居中。
