图片HTML5中无法居中主因是CSS理解偏差：margin:auto需块级+定宽，flex需父容器设justify-content和align-items并保证高度。
图片在 HTML5 中无法居中，通常不是框架问题，而是 CSS 作用方式没理清——margin: auto 和 flex 各有前提，用错场景就失效。
为什么 margin: auto 对图片没反应？
因为 margin: auto 水平居中只对「块级元素」且设置了明确宽度时才生效。而 display: inline），浏览器不会给它自动计算左右 margin。
- 必须先让图片变成块级：
display: block - 必须显式设置宽度（哪怕只是
width: fit-content或具体像素值） - 父容器不能是
text-align: center混用——那只是“假装居中”，实际不触发margin: auto的计算逻辑
img {
display: block;
width: 300px; /* 必须有宽度 */
margin: 0 auto; /* 左右 auto 才有效 */
}
flex 居中更可靠，但父容器要配好
Flex 布局真正解决的是“容器内子项居中”问题，不依赖子元素类型或宽度。但常见错误是只加了 display: flex，却漏掉关键的对齐声明。
-
justify-content: center控制主轴（默认为水平）居中 -
align-items: center控制交叉轴（默认为垂直）居中 - 如果父容器高度未定义（比如只有内容撑开），垂直居中可能“看不见效果”，需设
min-height或height - 不要给图片设
margin: auto—— 在 flex 容器里它会覆盖 flex 对齐行为
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* 确保有高度可居中 */
}
img {
max-width: 100%;
height: auto;
}响应式图片居中该选哪个？
纯居中需求下，flex 是首选；但如果只是简单页面顶部一张 banner 图，text-align: center 配合 display: inline-block 更轻量、兼容性更好（IE10+）。不过要注意：
立即学习“前端免费学习笔记（深入）”；
-
text-align: center只影响内联/内联块级元素，对block无效 -
inline-block元素之间会有空白符间隙，可用font-size: 0或注释消除 - Flex 在 Safari 旧版本（align-items: center
真正卡住人的往往不是“怎么写”，而是“为什么写了没效果”——检查图片是否被其他样式（比如 float、position: absolute）干扰，或者父容器是否意外设置了 overflow: hidden 切掉了居中后的外边距。这些细节比语法本身更常导致失败。
