用 display: flex + justify-content: center + align-items: center 配 max-width: 100% 和 height: auto 可同时实现居中与响应式；margin: 0 auto 对行内 img 无效，text-align: center 易受父容器和子元素类型干扰，flex 要求父容器有明确高度参照。
直接用 display: flex + justify-content: center + align-items: center，再配 max-width: 100% 和 height: auto，就能同时解决“居中”和“响应式”两个问题。其他方法要么只管水平、要么兼容性差、要么容易被干扰失效。
为什么不能只给 <img> 加 margin: 0 auto
因为 <img> 默认是行内元素，margin: 0 auto 对它完全无效——浏览器不计算行内元素的左右 margin 自动分配。就算你加了 display: block，也还得满足另一个硬条件：图片必须有可计算的宽度。如果写了 width: 100% 或者没设 width，margin: 0 auto 就会退化成贴左。更麻烦的是，它压根不处理垂直方向，小屏下常出现顶部大片留白。
text-align: center 看似简单，但实际很脆弱
这个方法只作用于父容器，且只影响它的行内子元素。常见翻车点包括：
- 父容器本身被
float、display: inline-block或其他样式限制了宽度 → 居中基准偏移 - 父容器里混了
<div>、<p>这类块级子元素 → 它们不受text-align控制，视觉上“居中”就断了 - 想在 Flex 容器里套一层
text-align: center→ Flex 已接管对齐逻辑，这个声明会被忽略
它适合纯图文段落或卡片里单张配图这种轻量场景，不适合需要稳定二维居中的主视觉图。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
Flex 布局要生效，父容器高度不能塌
很多人写了 justify-content: center 和 align-items: center 却发现图片只水平居中、垂直还是贴顶，根本原因是父容器没有明确高度参照。浏览器不知道“中”在哪——align-items: center 需要一个可用的交叉轴空间。
- 最常用的是
height: 100vh（占满视口），适合全屏 banner 或登录页大图 - 也可以用
min-height: 300px，兼顾内容撑高和最小展示空间 - 千万别直接在
<body>上设display: flex→ 它会让所有直系子元素变成 flex item，破坏原有文档流 - 图片自身必须加
max-width: 100%和height: auto，否则宽屏下溢出、窄屏下变形
响应式对齐切换别重复写图片尺寸
真正响应式不是靠每个断点都重写 img { width: 100% }，而是用媒体查询控制父容器的对齐方式：
- 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-container { display: flex; justify-content: flex-start; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { display: flex; justify-content: flex-end; } }
关键点在于：对齐行为由父容器承担，图片样式保持不变；flex 和 text-align 切换时注意 display 类型是否冲突；移动端优先的话，先写默认居中，再用 min-width 覆盖。
最容易被忽略的是容器高度和图片固有尺寸之间的张力——比如一张 2000×1000 的大图，在 max-width: 100% 下缩放后，若父容器高度没设够，align-items: center 就没意义；反过来，如果父容器设了固定 height 但没加 overflow: hidden，缩放后可能裁切或撑开。这些细节不试一遍真看不出问题。
