text-align: center作用于父容器可实现图片水平居中，因img默认为行内元素；margin: 0 auto对img无效，因其非块级且无明确宽度；垂直居中须用display: flex+justify-content: center+align-items: center，并确保父容器有明确高度。
直接用 text-align: center 作用于父容器，再给 <img> 加 max-width: 100% 和 height: auto，就能稳住水平居中；想垂直居中，必须上 display: flex 布局，并确保父容器有明确高度。
为什么 margin: 0 auto 写在 <img> 上没反应
因为 <img> 默认是行内元素，margin: auto 对它完全不生效。即使加了，浏览器也当没看见。
- 必须显式写
display: block或display: inline-block - 还得有可计算宽度：比如
width: 300px；但max-width: 100%不行——浏览器无法算出“剩余空间”来均分 - 父容器不能是
display: flex或display: grid，否则会接管 margin 行为 - 响应式场景下硬设固定宽不现实，所以这个方案在移动端容易翻车
text-align: center 必须写在父容器上，不是 <img> 自身
很多人把 text-align: center 直接塞进 <img style="max-width:90%">，这完全无效。它只对父级块容器起作用，且只影响其内部的行内级内容（<img> 默认就是）。
- 父容器建议不设固定宽，或设
width: 100%，避免因浮动、inline-block或空内容导致宽度塌缩 - 如果父容器用了
font-size: 0（常用来清除 inline 元素间隙），记得给<img>单独加font-size: initial，否则图片可能消失 - 它只管水平方向；垂直方向仍贴顶，需额外处理（比如靠
line-height或外层 flex） - 混排时注意：父容器里若有
<div> 这类块级子元素，它们不受 <code>text-align影响，依然左对齐Flex 布局实现真正响应式双向居中，三要素缺一不可
justify-content: center和align-items: center必须同时写在父容器上，且父容器得有高度参照，否则align-items就是摆设。- 父容器必须设
display: flex，不是<img>自己 - 必须配明确高度：推荐
min-height: 100vh（比height: 100vh更安全，防内容溢出） -
<img>只需max-width: 90vw+height: auto，不用写width或height固定值 - 别直接在
上设display: flex，否则所有直系子元素（如多个<p></p>）都会变成 flex item，布局全乱
最易被忽略的是父容器高度——没有它，
align-items: center就像让一个人站在一张纸片上“站中间”，结果只能是贴着纸边。另外，max-width和width: auto必须成对出现，否则小屏下仍可能拉伸变形。 - 父容器必须设
