align-items: center 仅在 display: flex 或 grid 容器中生效，且要求父容器有明确高度（否则交叉轴无空间可居中），同时子元素不能脱离文档流（如 position: absolute 或 float）。
直接用 display: flex + justify-content: center + align-items: center 最稳，但必须确保父容器有明确高度且图片没脱离文档流——否则“居中”只是写在了代码里，实际不生效。
为什么 text-align: center 有时不管用
它只对行内级子元素起作用，而 <img> 默认确实是 inline，但以下情况会让它失效：
- 父容器宽度被
float、position: absolute或display: inline-block干扰，导致实际可居中空间不可预测 - 父容器里混了块级元素（比如多个
<p>），text-align对它们无效，视觉上就显得“偏了” - 图片加了
display: block却没配margin: 0 auto，此时text-align完全不起作用
真正安全的写法是包裹一层 <div class="img-container">，并在 CSS 中统一控制：.img-container { text-align: center; width: 100%; }。
margin: 0 auto 必须满足的三个条件
这个组合看起来简单，但漏掉任意一个都会让图片靠左不动：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
display: block或inline-block—— 行内元素无视margin: auto - 图片要有可计算的宽度：显式设
width: 300px，或用max-width: 100%配合父容器流式宽度；width: 100%本身会让margin: auto失效 - 父容器不能是
display: flex或display: grid—— 它们会接管子元素的 margin 行为
常见翻车现场：<img src="x.jpg" style="display: block; max-width: 100%; margin: 0 auto;"> → 图片仍靠左，因为 max-width 不提供确定宽度，浏览器无法分配“剩余空间”。
Flex 居中失效的三大硬伤
写了 justify-content: center 和 align-items: center 却没反应？大概率卡在这三处：
- 父容器没设
display: flex—— 只给<img>加没用 - 父容器高度塌陷：比如只写了
width: 100%，没设height、min-height或aspect-ratio，导致交叉轴长度为 0，“垂直居中”无从谈起 - 图片加了
position: absolute或float—— 元素已脱离文档流，flex 规则自动失效
正确最小闭环：<div style="display: flex; justify-content: center; align-items: center; height: 300px;"><img src="x.jpg" style="max-width: 100%; height: auto;"></div>。
响应式图片尺寸与居中的协同要点
居中只是布局一环，真正“响应式”还得管住尺寸和比例：
-
max-width: 100%是底线，但别忘了加height: auto，否则宽高比崩坏 - 大图在宽屏下可能撑太满，建议加
max-width: 90vw留白，比死守100%更友好 - 如果父容器用了
max-width: 1000px，子容器（如.divbox3）必须用width: 100%，而不是继续写width: 1000px，否则窄屏下必然溢出 - 避免在图片上直接写
style，把max-width: 100%; height: auto; display: block;抽成类名（如.responsive-img），后续维护和媒体查询都方便
最易忽略的是：居中行为依赖于父容器的渲染上下文，而这个上下文极易被 padding、border、box-sizing 或外层 overflow 暗中破坏。检查时优先确认父容器是否“干净”。
