图片居中关键在于容器布局而非图片本身，推荐用flex布局（display: flex; justify-content: center; align-items: center）配合明确高度和max-width: 100%实现响应式双向居中。

img 默认是行内元素，直接加 margin: 0 auto 或只设 text-align: center 很容易失效——关键不在图片本身，而在它所处的“展示区”容器是否提供了可响应、可居中的上下文。

展示区用 flex 布局实现双向响应式居中

这是现代项目中最可靠的做法，能同时处理水平+垂直居中，并天然响应窗口缩放。

• 父容器（即“展示区”）必须设 display: flex、justify-content: center 和 align-items: center
• 容器要有明确高度参照，比如 height: 100vh（全视口高）、min-height: 400px 或由内容撑开但不塌陷
• img 自身加 max-width: 100% 和 height: auto，防止溢出或拉伸
• 避免在 body 或全局容器上直接设 display: flex，否则会干扰其他子元素流式布局

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <img src="photo.jpg" alt="展示图"   style="max-width:90%">
</div>

展示区宽度受限时仍要居中，别只盯 img

常见翻车点：展示区用了 max-width: 800px 或 margin: 0 auto 居中自身，但里面图片还是靠左——因为父容器没设对齐方式。

• 如果展示区是居中的块级容器（如 <div class="gallery">），它自己已居中，但内部 <code>img 还需额外控制
• 此时只需给展示区加 text-align: center（兼容老浏览器）或 display: flex; justify-content: center（现代）
• 不要给 img 加 display: block; margin: 0 auto，除非你明确知道它的宽度（比如固定 width: 320px），否则 max-width: 100% 会让 margin: auto 失效

媒体查询切换对齐方式，别重复写图片尺寸

响应式对齐不是让图片“变小再居中”，而是按断点切换容器的对齐行为。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载

立即学习“前端免费学习笔记（深入）”；

• 小屏居中：@media (max-width: 768px) { .showcase { text-align: center; } }
• 中屏左对齐：@media (min-width: 769px) and (max-width: 1024px) { .showcase { text-align: left; } }
• 大屏右对齐（flex 版）：@media (min-width: 1025px) { .showcase { justify-content: flex-end; } }
• 所有断点里，img 的 max-width: 100% 和 height: auto 只需写一次，无需重复

带链接的图片居中，a 标签也要参与布局

如果 img 包在 <a href="..."></a> 里，而链接区域也要居中，就不能只动 img。

• 把 a 设为 display: block 或 display: inline-block，再对其设 text-align: center（父容器）或 margin: 0 auto（自身）
• 更稳妥的是让 a 成为 flex 容器：display: flex; justify-content: center; align-items: center，然后 img 保持默认 inline 行为即可
• 注意：若 a 是行内元素，margin: 0 auto 对它无效；若设了 display: block 却没给宽度，margin: auto 也可能不生效

真正难的不是写哪一行 CSS，而是判断“谁该负责居中”——是 img？它的父 div？还是包裹链接的 a？一旦容器层级和 display 行为没理清，再多的 !important 都救不回来。