最快居中图片的方法是父容器设 text-align: center，但仅适用于 inline 或 inline-block 元素；响应式场景需用 display: block + max-width: 100% + height: auto + margin: 0 auto；Flexbox 方案更通用但需注意容器宽度约束；align="center" 已废弃不可用。
用 text-align: center 居中 <img> 最快但有前提
单行内联图片（默认 display: inline）用父容器加 text-align: center 就能居中，3 行以内搞定：
<div style="text-align: center"> <img src="photo.jpg" alt="示例"> </div>
但注意：这个方法只对 inline 或 inline-block 元素生效。如果图片被设了 display: block（比如加了 width: 100% 做响应式），text-align 就失效了——这是最常踩的坑。
响应式图片 + 水平居中必须处理 display 和 margin
真正响应式场景下，图片通常要设 max-width: 100% 和 height: auto，此时它默认变成 block 元素。这时候得靠 margin: 0 auto：
<div> <img src="photo.jpg" alt="示例" style="max-width: 100%; height: auto; display: block; margin: 0 auto;"> </div>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
display: block是启用margin: 0 auto居中的必要条件 -
max-width: 100%保证缩放不溢出容器，height: auto保持宽高比 - 别漏写
margin: 0 auto的0（上/下边距）和auto（左右自动）
Flexbox 方案更稳，但要注意父容器宽度
如果父容器本身没设宽度（比如 <body> 或 <main>），直接用 Flex 一行代码也能居中：
<div style="display: flex; justify-content: center"> <img src="photo.jpg" alt="示例" style="max-width: 100%; height: auto"> </div>
优势是不用管 display 类型，图片保持 inline 也生效。但容易忽略的是：flex 容器若没有明确宽度约束（比如在窄屏下内容区太宽），图片可能撑满整屏——这时得配合 max-width 或媒体查询限制容器宽度。
别用 align="center" 这种过时写法
HTML4 时代的 <img align="center"> 已被废弃，现代浏览器虽可能兼容，但实际行为不可靠（它不是水平居中，而是文字环绕对齐），且完全不响应式。W3C 明确标记为 obsolete，遇到 CI/CD 自动检查或严格模式会报 warning。
真正需要兼顾语义、响应式和居中的最小闭环，就是「block + max-width: 100% + margin: 0 auto」这三者缺一不可；少一个，要么不居中，要么破布局，要么失比例。
