固定区域内响应式图片水平居中，关键在于控制图片在有明确边界的容器中不越界、不拉伸且始终居中：text-align: center 最轻量但需父容器块级且设于父元素；margin: 0 auto 最可控但要求图片 display: block 且父容器非 flex/grid；flex 布局（justify-content: center）在尺寸明确时最稳定可靠。
固定区域内响应式图片水平居中，关键不是让图片“自己居中”，而是控制它在**有明确边界**的容器里不越界、不拉伸、且始终水平居中——text-align: center 最轻量，margin: 0 auto 最可控，但两者都依赖容器状态和图片自身 display 类型。
text-align: center 只对父容器生效，且仅限水平方向
这是兼容性最好、代码最少的方案，但必须写在包裹 <img> 的父元素上（比如 <div>），而不是 <code><img> 自身。因为 text-align 是容器属性，作用对象是它的行内子内容，而 <img> 默认就是 inline 元素。
- 父容器必须是块级（如
<div>），且宽度明确：不能被 <code>float、display: inline-block或塌陷的height拉窄 - 多张图片会并排居中；若需换行，得额外给
<img>加display: block - 它不管图片是否超出容器——必须配合
max-width: 100%和height: auto才真正响应式 - 必须加
display: block，否则对默认inline的<img>无效 - 不能设
width: auto或width: 100%；响应式下推荐max-width: 100%+height: auto - 父容器不能是
display: flex或display: grid，否则会接管 margin 行为，auto直接失效 - 它完全不处理垂直方向，图片仍贴顶显示
- 只需
justify-content: center，align-items完全不用加（除非你也想垂直居中） - 父容器必须设
display: flex，且不能是body或全局容器，否则会破坏原有文档流结构 - 旧版 Android WebView（4.4 及以下）需加
display: -webkit-flex前缀 -
<img>本身仍推荐只设max-width: 100%和height: auto，避免固定尺寸破坏响应性
示例：<div style="text-align: center; width: 100%; max-width: 600px;"><img src="logo.png" style="max-width:90%"></div>
margin: 0 auto 要求 display: block + max-width: 100% + 非 flex 父容器
这个组合适合图片需要脱离行内流、独占一行的场景。但它不是“自动居中”，而是浏览器把左右 margin 平分剩余空间——所以必须有“剩余空间”可分，且图片宽度必须可计算。
示例：<img src="icon.svg" style="max-width:90%">
Flex 布局在固定区域里做水平居中更稳妥，但别误用 align-items
如果父容器本身已有明确宽高（比如 width: 300px; height: 200px;），用 flex 实现水平居中反而比 text-align 更可靠——尤其当父容器里混有其他块级元素时，text-align 对它们无效，flex 则统一控制。
示例：<div style="display: flex; justify-content: center; width: 300px; height: 200px; border: 1px solid #ccc;"><img src="photo.jpg" style="max-width:90%"></div>
最容易被忽略的是：固定区域的“固定”二字——它意味着你已知宽高或最大尺寸，此时 text-align 和 margin: 0 auto 都可能因父容器意外塌陷或样式冲突而失效；而 flex 方案虽然稍重，但一旦容器尺寸明确，它的居中行为最稳定、最不易被其他 CSS 干扰。
