图片超链接居中需同时解决点击热区覆盖与视觉居中，text-align: center仅水平有效且依赖父容器；margin: 0 auto需img为块级、有明确宽度；flex布局需父容器有高度并设justify-content和align-items；热区完整需避免空格、重置img样式。
图片作为超链接入口时，居中不是“给 a 或 img 加个居中样式”就能一劳永逸的事——它本质是「容器布局问题」，必须同时解决两个层面：链接可点击区域是否完整覆盖图片、视觉位置是否真正居中。错一个环节，就会出现点击热区偏移、图片贴边、垂直塌陷等现象。
用 text-align: center 最快但只管水平
这是最轻量、兼容性最好的方案，但仅适用于图片为行内元素且父容器宽度明确的场景。
- 必须写在父容器上，比如
<div style="text-align: center"><img src="logo.png" alt="首页"></div>；写在<img>自己身上完全无效 - 父容器不能被
float、display: inline-block或其他样式意外压缩宽度，否则居中会失效 - 如果父容器里混有
<div>等块级子元素，它们不受text-align影响，仍会左对齐，破坏整体观感 - 它不管垂直方向，图片默认基线对齐，可能和文字混排时下沉；若需垂直居中，得额外加
vertical-align: middle
margin: 0 auto 需满足三个硬条件
这个组合常被误认为“万能居中”，其实它只负责把块级元素左右 margin 平分，前提是“有空间可分”。
-
img必须设为块级：display: block（或inline-block） - 必须有可计算的宽度：
width: 200px或width: 100%不行（后者会让auto失效），max-width: 100%也不行 - 父容器不能是
flex或grid布局，否则margin行为会被容器接管 - 示例：
<img src="banner.jpg" style="display: block; width: 800px; margin: 0 auto;">—— 它依然贴顶，垂直方向无变化
Flex 布局双向居中但父容器高度不能塌
这是现代项目里最可控的方案，但最容易只写一半就以为搞定了。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须同时设置：
display: flex、justify-content: center、align-items: center - 父容器必须有明确高度参照，比如
min-height: 300px、height: 100vh；否则align-items: center没空间可居中，图片只会水平居中、垂直贴顶 - 别直接在
<body>上加display: flex→ 它会让所有直系子元素（如多个<p>）变成 flex item，破坏原有文档流 - 旧 Android（4.4 及以下）需加
-webkit-前缀，如display: -webkit-flex
图片链接热区要完整，别让 alt 或空白撑开
即使视觉居中了，如果用户点不到图片，等于白做。常见干扰源：
-
<a href="#"><img src="..."></a>中，<a>和<img>之间不能有换行或空格，否则某些浏览器会渲染出多余空白，导致热区与图片错位 - 别依赖
alt文字撑开链接区域——它只是备用文案，不参与布局；图片加载失败时才显示，不能当占位符用 - 如果图片本身带
border或padding，会影响实际点击范围；建议统一用 CSS 重置：img { border: none; vertical-align: top; } - 响应式场景下，
max-width: 100%很必要，但要配合height: auto，否则拉伸变形会间接影响居中稳定性
真正难的不是写出居中代码，而是判断当前上下文里哪一层在控制尺寸、哪一层在接管对齐、哪一层悄悄吃了高度——这些细节藏在父容器的 display 类型、高度来源、子元素类型里，改一行 CSS 可能牵出三处连锁反应。
