居中需按元素类型和上下文选择方案：text-align:center用于父容器内联内容；margin:0 auto要求块级、定宽、非flex/grid父容器；flex需设justify-content/align-items及父容器高度；绝对定位+transform适用于未知尺寸元素。
文字和图片居中不是“一个方案通吃”，得看元素类型、上下文和是否要垂直居中。用错方法，text-align: center 加了也不动，margin: 0 auto 写了也白写——问题通常出在元素类型或父容器状态上。
text-align: center 只对父容器生效，且只影响行内内容
这是最常被误用的点：给 <img> 或 <p> 自己加 text-align: center 没用，它必须写在**父容器**上。
- 适用场景：段落里有文字 + 一张图（
<img>默认是inline），想让它们整体水平居中 - 正确写法：
<p style="text-align: center"><img src="a.jpg"> 这段文字也会居中</p> - 常见错误现象：
<div><img></div>中只给<img>加text-align，浏览器直接忽略 - 注意：
<div>这类块级子元素不会被text-align影响；如果里面嵌了另一个<div>，它依然靠左——除非你把它改成display: inline-block
margin: 0 auto 要求块级 + 明确 width + 非 flex/grid 父容器
这个组合看似简单，但漏掉任一条件就失效。它不是“让元素居中”，而是“让左右 margin 平分剩余空间”。
- 必须同时满足：
display: block（或默认块级）、width（不能是100%或未设）、margin-left: auto; margin-right: auto - 图片要走这条路？先加
display: block：<img src="x.png" style="display: block; width: 200px; margin: 0 auto;"> - 常见错误现象：
margin: 0 auto没反应 → 检查父容器是不是display: flex或display: grid（会覆盖 auto 行为）；或者子元素用了float/position: absolute - 兼容性好，IE8+ 都支持，但不解决垂直居中
Flex 布局居中要小心父容器高度和子元素行为
display: flex 是目前最可控的方案，但别无脑套在 <body> 上——它会改变所有直系子元素的布局逻辑。
立即学习“前端免费学习笔记（深入）”；
- 水平居中单个元素：
.parent { display: flex; justify-content: center; } - 水平 + 垂直居中：
.parent { display: flex; justify-content: center; align-items: center; height: 100vh; }（height必须有，否则align-items无效） - 图文混排时，
<p>里的文字和<img>会被当作独立 flex item，可能错位；建议把图文包进一个子<div>再居中 - 副作用：子元素的
float、vertical-align、传统margin对齐全部失效
绝对定位 + transform 是唯一不依赖尺寸的真居中
当你要居中的元素宽高未知（比如动态加载的弹窗、响应式图标），又不想它影响文档流，这是最稳的选择。
- 核心三件套：
position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%) - 必须给父容器加
position: relative（否则top/left会相对于视口定位，滚动就偏） - 不需要知道元素宽高，
transform是基于自身尺寸计算的 - IE9+ 支持
transform；IE8 及以下需退化为负 margin（必须提前知道宽高） - 脱离文档流意味着后续元素会“看不见”它，布局需额外预留空间或用
z-index控制层级
真正容易被忽略的点是：居中从来不是孤立操作。它取决于你正在处理的是什么元素、它的父容器是什么状态、以及你是否愿意为它改变整个布局上下文。选错前提，再熟的 CSS 属性也救不了。
