margin: 0 auto 常失效因 img 默认 inline 且无明确宽度；需 display: block + 显式 width（非 auto/100%）；flex/grid 容器中应改用 place-items: center（父容器需 height: 100vh）；响应式大图须同时设 max-width: 100% 和 height: auto。
大图用 img 标签时，margin: 0 auto 为什么常失效
这不是写法错，而是条件没凑齐。margin: 0 auto 只对块级元素生效，且必须有可计算的宽度——但大图往往设了 max-width: 100%，此时浏览器无法确定“实际宽度”，auto 就失去依据。
- 必须加
display: block，否则img默认是 inline，margin不起作用 -
width不能是auto或100%；可用width: fit-content（现代浏览器）或显式width: 800px（仅限固定尺寸场景） - 父容器不能是
flex或grid，否则会接管margin行为 - 移动端 Safari 对
margin: auto在 flex 容器里有历史 bug，建议回避
用 place-items: center 实现视口级居中，但别漏掉 height: 100vh
这是目前最简、最可靠的方案，一行 CSS 就能搞定水平+垂直居中，但前提是父容器高度必须明确。很多人写了 display: grid; place-items: center 却忘了给父容器设高度，结果图片还是贴顶。
- 必须作用在父容器上，比如
<div style="display: grid; place-items: center; height: 100vh;"><img></div> -
height: 100vh是硬性要求，min-height不够——place-items需要确切的交叉轴空间 - 如果页面有 header/footer，改用
height: calc(100vh - 60px)，避免滚动条干扰 - 旧版 iOS Safari（≤14.5）不支持
place-items，需降级为justify-content: center; align-items: center+display: flex
大图响应式缩放时，max-width: 100% 和 height: auto 必须同时存在
只设 max-width: 100% 会导致小屏下图片缩小但高度塌陷；只设 height: auto 而不控宽，大屏下图片可能溢出或拉伸。二者是绑定关系，缺一不可。
-
max-width: 100%：限制图片最大宽度不超过父容器，防溢出 -
height: auto：保持原始宽高比，防畸变 - 不要写
width: 100%——它强制拉伸，破坏等比缩放 - 若父容器用了
padding，记得加box-sizing: border-box，否则max-width计算会包含 padding
全屏大图还要适配不同宽高比屏幕，纯 CSS 不够，得靠 JS 缩放因子
直接设 width: 100vw; height: 100vh 看似全屏，实则危险：16:9 设计稿在 4:3 屏上会被压扁，在 21:9 屏上被拉长，Safari 还可能因滚动条宽度误判 100vw。
立即学习“前端免费学习笔记（深入）”；
- 以设计稿尺寸（如
1920×1080）为基准，JS 计算缩放因子：Math.min(window.innerWidth / 1920, window.innerHeight / 1080) - 用该因子动态设置
document.documentElement.style.fontSize，驱动 rem 布局缩放 - 配合
overflow: hidden和全 rem 写法，才能真正“等比缩放+居中填充” - resize 事件里重算一次，避免横竖屏切换时缩放错乱
复杂点不在写法本身，而在缩放逻辑必须和容器尺寸、视口变化、图片固有比例三者咬合——漏掉任一环，大图就会偏移、裁切或留黑。
