单行超链接居中应给父容器设text-align: center，因默认为行内元素，不响应margin: 0 auto；若转为display: block则必须显式设width，否则仍无效。

单行超链接居中，本质是让 @#@#@#@#@#@#@#@#@#@0）

页脚版权区域的“隐私政策”“联系我们”等链接

示例：

<div style="text-align: center; padding: 20px;">
  <a href="/home">首页</a>
  <a href="/about">关于我们</a>
  <a href="/contact">联系我</a>
</div>

注意：text-align: center 只管水平居中；若要垂直居中，得看父容器是否定高——此时可配合 line-height，但仅限单行且高度固定。

需要垂直居中时：用 Flex 更可靠

当父容器有明确高度（比如导航栏高 60px），又要求链接在其中水平+垂直居中，text-align + line-height 容易因字体渲染差异错位，Flex 是更稳的选择。

Wechat Article Html

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

下载

关键点：

• 必须给父容器设 display: flex，不是给 <a></a>
• justify-content: center 控制水平，align-items: center 控制垂直
• 父容器需有高度（height 或 min-height），否则 align-items: center 无参照

示例：

<nav style="height: 60px; display: flex; justify-content: center; align-items: center; background: #f5f5f5;"><a href="/home">首页</a>
  <a href="/products">产品</a>
</nav>

容易被忽略的兼容性与结构陷阱

实际项目里出问题，往往卡在这几个地方：

• 父容器用了 float 或 position: absolute，导致 text-align 失效（text-align 只作用于其块级子元素内的行内内容，不继承到脱离文档流的后代）
• <a></a> 里嵌套了 <span></span> 或 <img> 且设置了 vertical-align: top/bottom，破坏了行高对齐
• 移动端 Safari 对 line-height 的解析有时偏上，单靠它做垂直居中不如 Flex 稳定
• 如果链接本身是响应式（比如文字缩放、换行），text-align + line-height 会失效，必须切到 Flex 或 Grid

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！