text-align: center必须写在父容器上才能使超链接水平居中；它仅作用于行内级子元素（如纯文本或inline img），对块级子元素无效，且父容器需为块级并具备明确宽度。

直接给超链接加 text-align: center 没用——它必须写在父容器上，不是 <a> 自己。

给包裹 <a> 的父容器设 text-align: center

这是最轻量、兼容性最好的做法，前提是链接内容是行内级（比如纯文字或带 <img> 的简单组合）。

• 父容器必须是块级元素（如 <div>、<p>），且宽度足够（不能被 float 或 display: inline-block 挤窄）
• <a> 默认就是行内元素，不用改 display，直接靠父容器的 text-align 居中
• 如果链接里嵌了 <div> 或其他块级子元素，它们不会被居中——text-align 只管行内内容

示例：

<div style="text-align: center;">
  <img src="main.jpg" alt="主图">
  <a href="/detail" style="display: inline-block; margin-top: 8px;">查看详情</a>
</div>

用 flex 布局让主图 + 链接整体垂直堆叠并居中

当你要控制主图和下方链接之间的间距、对齐基准，或者链接内容较复杂（比如带图标+文字），flex 更可靠。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 父容器设 display: flex; flex-direction: column; align-items: center;，这样所有子元素（包括图片和链接）都按中心线对齐
• 避免只写 justify-content: center——那会让整个内容块在父容器里居中，而不是“链接在图下方居中”
• 如果父容器高度塌陷（比如没设 min-height 或内容太短），align-items 依然生效，但视觉上可能看不出区别

示例：

<div style="display: flex; flex-direction: column; align-items: center; gap: 12px;">
  <img src="main.jpg" alt="主图">
  <a href="/detail">查看详情</a>
</div>

<a> 单独设 display: block + margin: 0 auto

这适合链接本身需要固定宽度（比如按钮样式）、且你不想动父容器布局逻辑的场景。

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

• 必须同时满足：链接设 display: block（否则 margin: 0 auto 无效），并有可计算的宽度（显式 width，或靠内容撑开但不占满父宽）
• 如果链接用了 width: 100%，margin: 0 auto 就失效——左右没“剩余空间”可分
• 这个方法只管水平居中，垂直方向仍依赖行高或上下 margin 控制位置

示例：

<div>
  <img src="main.jpg" alt="主图">
  <a href="/detail" style="display: block; width: 120px; margin: 8px auto 0;">查看详情</a>
</div>

最容易被忽略的是：链接是否真的在主图“正下方”。很多翻车是因为父容器用了 float、position: absolute 或意外设置了 vertical-align，导致图文错位。检查时优先看父容器的 display 和 position 状态，而不是反复调链接的 margin。