最轻量兼容方案是父容器设text-align: center（仅水平，适用于inline元素）；现代首选flex布局：父容器display: flex + justify-content: center + align-items: center；绝对定位+transform适合脱离文档流场景。
直接给父容器加 display: flex + justify-content: center + align-items: center，90% 的居中需求就解决了。别在子元素上折腾，也别一上来就写 margin: 0 auto——它只管水平，且必须设宽。
text-align: center 只对父容器生效，且只管水平
这是最轻量、兼容性最好的方案，但仅适用于文字、<img>、<span> 这类默认 inline 或 inline-block 的内容。它不移动元素本身，只是让行内内容在父容器的行框里居中。
- 必须写在父容器上，比如
<div style="text-align: center"><img></div>；写在<img>自己身上完全无效 - 父容器不能是
display: flex或display: grid，否则该声明被忽略 - 如果父容器里混了
<div>这类块级子元素，它们不受影响，依然靠左显示 - 垂直方向无作用——单行文本可用
line-height配合，多行或复杂结构就别硬撑
flex 布局居中：父容器设三行，子元素零配置
现代项目首选。关键不是“怎么设置子元素”，而是“怎么设置它的父容器”。只要父容器有明确高度（比如 min-height: 100vh 或固定 height），子元素就能真正上下左右居中。
- 三行核心样式：
display: flex、justify-content: center、align-items: center，全部写在父容器上 - 子元素无需设
width、height，也不用改display类型，<img>、<button>、<svg>全都直接居中 - 旧版 Safari（iOS 9 / macOS 10.11 之前）需加前缀：
display: -webkit-flex、-webkit-justify-content: center、-webkit-align-items: center - 别直接在
<body>上写display: flex——它会让所有直系子元素变成 Flex 项目，破坏原有文档流
绝对定位 + transform：适合模态框、提示层等脱离文档流场景
当元素需要盖在页面上方、不占位、且必须精准居中时，这个组合最可靠。它不依赖父容器宽度，也不受 Flex/Grid 干扰，但前提是定位上下文要正确。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有
position: relative（或absolute/fixed），否则top: 50%会相对于视口计算，滚动后偏移 - 子元素写
position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%) -
transform是关键——它把元素自身宽高的一半“挪回去”，不依赖具体像素值，比手动写margin-left: -100px安全得多 - IE9+ 支持，但 Android 4.4 及以下需测试
-webkit-transform兼容性
最容易被忽略的是“居中对象的类型”和“父容器的布局上下文”。一张 <img> 在 flex 容器里能自动居中，在 grid 容器里也能，但在 table-cell 里就得配 vertical-align；而一个 <div> 若被父容器设成 display: grid，再写 margin: 0 auto 就彻底失效。选方案前，先看清楚这两点。
