给<a>包裹的<img>居中，最稳方案是设<img>为display: block; margin: 0 auto;；text-align: center须作用于父<div>；Flex需父容器设display: flex; justify-content: center; align-items: center并有明确高度。

给 <a> 包裹的 <img> 加 display: block 和 margin: 0 auto

带链接的图片默认仍是行内元素，margin: 0 auto 直接写在 <a> 或 <img> 上都不生效。必须让图片自己变成块级元素，再靠自动外边距居中。

常见错误现象：
只写 margin: 0 auto 却没改 display；或把 text-align: center 错加在 <a> 上——它不是容器，不控制子元素对齐。

• 必须显式设置 <img> 的 style="display: block; margin: 0 auto;"
• 如果父容器（比如 <div>）宽度不确定，建议同时限制图片宽度，如 width: 200px 或 max-width: 100% + height: auto
• <a> 标签本身无需额外样式，也不用设 display: block——它会自然包裹住已变块级的图片

示例代码：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<div>
  <a href="https://example.com">
    <img src="logo.png" alt="Logo" style="display: block; margin: 0 auto; max-width: 100%; height: auto;">
  </a>
</div>

用 text-align: center 居中整个 <a><img></a> 块

这是最轻量、兼容性最好的方式，但前提是把 <a> 当作普通行内容来处理——即它得在有明确宽度的块级父容器里，且自身不脱离文档流。

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

常见翻车点：
父容器用了 float、display: inline-block 或被其他样式压缩了宽度；<a> 里混了其他块级标签（如 <div>），它们不受 text-align 影响。

• 只给父容器（如 <div>）加 style="text-align: center;"
• <a> 和 <img> 都保持默认显示模式（inline）即可
• 适合图文混排段落、简单 banner、邮件模板等对兼容性要求高的场景

示例代码：

<div style="text-align: center;">
  <a href="https://example.com"><img src="icon.svg" alt="Icon"></a>
</div>

Flex 布局实现精确水平+垂直居中（含链接）

当需要把带链接的图片放在固定高度容器中央（比如弹窗、卡片封面、登录页图标），display: flex 是唯一可靠方案。注意：必须作用于 <a> 的父容器，不是 <a> 或 <img> 自身。

容易忽略的限制：
父容器若无高度（如塌陷的 <div>），align-items: center 就无效；直接在 <body> 上用 flex 会破坏全局文档流。

• 父容器设 display: flex; justify-content: center; align-items: center;
• 必须提供高度参照，例如 min-height: 300px、height: 100vh，或用 padding 撑开
• <a> 保持默认 display: inline 即可，不需要额外样式

示例代码：

<div style="display: flex; justify-content: center; align-items: center; min-height: 200px; border: 1px solid #eee;">
  <a href="https://example.com"><img src="logo.png" alt="Logo"></a>
</div>

为什么不用 align="center" 或 <center>？

这两个是 HTML4 时代的废弃属性/标签，现代浏览器虽可能降级渲染，但行为不可控：部分版本忽略，部分版本触发怪异盒模型，且完全不支持响应式或垂直对齐。

更实际的问题是：
align="center" 写在 <a> 或 <img> 上毫无效果；<center> 在 HTML5 中已被移除，W3C 不再验证，VS Code 等编辑器会标黄警告。

• 所有主流框架（React/Vue/Svelte）默认禁用这些属性，JSX 中直接报错
• 搜索引擎和无障碍工具（如屏幕阅读器）不识别其语义，影响 SEO 和可访问性
• 一旦开启严格 CSP 策略，内联 align 属性可能被拦截

真正该关注的，是父容器的尺寸控制与文档流状态——很多“居中失败”，其实源于容器高度塌陷、浮动未清除、或响应式断点下 max-width 和 margin 的冲突。