margin: 0 auto对无效，因其默认为inline元素，而该写法仅对块级元素生效；需同时设display: block、明确宽度（如width: 300px），且父容器不能是flex或grid。
为什么margin: 0 auto加在<img>上没反应
因为<img>默认是display: inline，而margin: auto对行内元素水平方向完全无效。就算你写了，浏览器直接忽略。
要让它生效，必须同时满足三个硬条件：
- 显式加
display: block或display: inline-block -
<img>得有可计算的宽度：比如width: 300px；max-width: 100%不行，浏览器算不出“剩余空间” - 父容器不能是
display: flex或display: grid——它们会接管居中逻辑，margin被静默覆盖
响应式场景下，图片宽度常随视口变化，硬设width不现实，所以margin: 0 auto不是首选方案。
text-align: center只写在<img>标签里就失效
这个属性必须作用于**父容器**（比如<div>），而不是<code><img>自身。写在<img>上毫无意义。
它能起效的前提是：
- 图片保持默认
inline行为（不加display: block） - 父容器没脱离文档流：不能有
float、position: absolute，也不能是flex/grid容器 - 父容器得有可计算的宽度：如果内部只有浮动子元素，它可能塌缩为
0宽，text-align就“失焦”了
常见翻车点：font-size: 0用在父容器里清间隙时，会把<img>高度压塌，记得给图片单独加font-size: initial。
Flex布局居中后图片还是贴顶？检查父容器高度
justify-content: center管水平，align-items: center管垂直——但后者依赖父容器在交叉轴（通常是高度）上有明确尺寸。如果父容器高度塌陷，align-items就等于让图片在0px高空间里居中，结果就是贴顶。
解决方法很简单：
- 视口级居中：用
height: 100vh - 内容区居中：用
min-height: 200px这类有下限的值 - 别直接在
上设display: flex，否则所有直系子元素（比如多个<p></p>）都会变成 flex item，原有文档流全乱
旧 Android（4.4 及以下）需补display: -webkit-flex和对应前缀，但仅当项目仍需兼容时才加。
缩放时图片突然偏移或跳动？定位基准不稳定
如果你用position: absolute + top: 50% + transform: translate(-50%, -50%)，缩放时偶尔跳动，大概率是因为定位基准漂移：百分比值参照的是最近的position: relative祖先，而那个祖先本身宽度若靠width: 90%这类相对单位定义、又没配max-width，它的尺寸就会随视口波动，导致坐标错位。
稳住它的办法：
- 确保带
position: relative的父容器有稳定宽度约束，比如width: 100%; max-width: 800px; margin: 0 auto - 避免混用
left/top百分比和transform——要么全用 Flex，要么全用margin: auto，减少叠加计算 - 必须用绝对定位时，把图片宽高也改用相对单位（如
width: 30vw），和left: 35vw配套，保持比例同步
真正麻烦的从来不是怎么写居中，而是哪个父容器悄悄塌了宽、哪个祖先偷偷加了float、哪行font-size: 0把图片吃掉了——这些干扰项藏得深，但只要逐层检查容器的display、position和尺寸上下文，基本都能定位到。
