margin: 0 auto 居中必须显式设置宽度且元素为块级；flex 布局中父容器设 display: flex + justify-content: center 可稳定水平居中，垂直居中需加 align-items: center。
用 margin: 0 auto 居中块级元素，但必须设宽度
这是最常用也最容易翻车的方法：给元素加 margin: 0 auto 看似万能，其实只对「有明确宽度」的块级元素生效。没设 width，浏览器算不出左右空多少，auto 就直接失效，元素还是左对齐。
常见错误现象：div 写了 margin: 0 auto 却纹丝不动；或者用了 display: inline-block 后又忘了父容器清除白空间，导致居中偏移。
- 必须显式设置
width（比如width: 300px或width: 80%） - 确保元素是块级（
display: block或默认块行为），inline元素不认这个规则 - 父容器不能是
text-align: left且子元素是inline-block—— 那会干扰计算，真要这么干，父容器得加text-align: center
Flex 布局居中：一行代码解决多数场景
display: flex + justify-content: center 是目前最稳的水平居中方案，对子元素类型几乎无要求（div、img、span 都行），也不用管宽高。
但要注意：它作用在父容器上，不是目标元素本身；而且默认只影响主轴（水平），垂直居中还得加 align-items: center。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex，子元素自动变成 flex item，无需额外样式 - 如果只想要水平居中，用
justify-content: center；需要上下左右都居中，再加align-items: center - 老版本 safari（
Safari ）需要加 <code>-webkit-前缀，display: -webkit-flex和-webkit-justify-content: center - 别在
body直接写display: flex——可能意外影响全局排版，建议包一层main或container
绝对定位 + transform 居中：适合脱离文档流的场景
当元素需要脱离文档流（比如弹窗、提示框），又得精准居中时，position: absolute 配合 transform: translate(-50%, -50%) 是可靠选择。它不依赖父容器宽度，也不吃 flex 兼容性问题。
容易踩的坑是忘记给父容器设 position: relative，结果元素相对于 body 定位，一跑就飞出视口。
- 目标元素加
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 它的**最近定位祖先**（通常是父容器）必须有
position: relative（或absolute/fixed） - 不要用
margin模拟偏移（比如margin-top: -100px），因为高度未知时没法算 -
transform在低版本 android webview（Android 4.3及以下）需加-webkit-transform
文本内容居中：别混淆 text-align 和 margin
text-align: center 只控制**行内内容**（文字、img、span）在块容器里的水平位置，和块元素自身居中是两回事。新手常把它和 margin: 0 auto 混用，结果发现标题居中了，下面的 div 还是靠左。
使用场景很明确：你只想让一段文字或一组图标在容器里居中显示，而不是移动整个容器。
-
text-align: center必须写在**父容器**上，不是文字本身 - 对
block元素无效（比如单独一个h2设text-align没用，得设在它外面的div上） - 如果父容器是 flex 容器，
text-align会被忽略——flex 的justify-content优先级更高 - 表格单元格（
td）默认就是text-align: left，居中要手动覆盖
真正麻烦的不是方法多，而是每种方法生效的前提条件不同。写完居中代码先盯三秒：元素类型对不对？父容器有没有约束？要不要兼容老浏览器？漏掉一个，页面就偏一点。