Flexbox居中图片必须作用于父容器而非img标签，需设display: flex、justify-content: center和align-items: center，并确保父容器有明确高度；响应式对齐应通过媒体查询修改父容器justify-content值。
Flexbox居中图片必须设在父容器上
直接给 <img> 加 justify-content: center 或 align-items: center 完全无效——这些是容器级属性，写在图片自身上会被浏览器忽略。真正起作用的是它的父元素是否启用了 display: flex。
常见翻车点：
- 把
display: flex错误加在<body>或<main>上，结果整页内容被强行拉成一行 - 父容器没设高度（尤其用
align-items: center垂直居中时），导致图片贴顶显示 - 父容器用了
float或position: absolute，flex 行为被彻底破坏
正确做法：单独包裹一层 <div class="img-container">，只对它启用 flex，并控制范围。
水平居中用 justify-content: center，但别漏掉 align-items
只写 justify-content: center 只能保证水平居中；如果图片高度超过父容器，或你想让它在视觉上“正中间”，align-items: center 必须同步存在。
立即学习“前端免费学习笔记（深入）”；
注意交叉轴行为：
-
align-items: center要求父容器有明确高度参照（如min-height: 200px、height: 100vh，或靠内容撑开） - 若图片本身高矮不一，又想顶部对齐（比如双图并排），改用
align-items: flex-start - 避免用
align-items: stretch（默认值），它会强制拉伸图片高度，破坏响应性
示例安全组合：
.img-container {<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> min-height: 250px;<br>}
响应式切换对齐方式，优先用媒体查询改父容器类
不要在每个断点里重复写 img { width: 100% } 或给图片加不同 margin——既难维护，又容易和 flex 冲突。真正的响应式对齐，是让父容器的 flex 行为随屏幕变化。
典型场景写法：
- 小屏居中：
@media (max-width: 768px) { .img-container { justify-content: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-container { justify-content: flex-start; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { justify-content: flex-end; } }
如果用了 text-align: center 方案，媒体查询里就换 text-align；但一旦上了 flex，就统一走 justify-content，别混用。
img 自身只需 max-width: 100% 和 height: auto
图片标签自己不需要 width、height 写死像素值，也不该设 display: block（flex 下它自动变成 flex item，display 属性被覆盖）。
唯一推荐的内联控制：
-
max-width: 100%防止溢出容器 -
height: auto保持宽高比，避免拉伸变形 - 如需圆角或裁剪，用
border-radius或object-fit: cover（注意后者要配合显式宽高）
切记：width: 100% 和 max-width: 100% 同时存在会冲突；margin: 0 auto 在 flex 容器里基本失效，删掉更干净。
<div> 加了 float: left，或者重置了 box-sizing 导致 padding 计算错乱。调试时先看 computed styles 里的 display 和 align-items 是否真生效，再往下查。 
