text-align:center可使a标签在父div中水平居中，因a为行内元素，需作用于块级父容器；flex布局（display:flex+justify-content:center）更灵活，支持多链接并排及响应式居中。
用 text-align 实现超链接横向居中（最常用）
超链接本身是行内元素，直接对 <a></a> 标签设置 margin: 0 auto 是无效的。正确做法是把它包在一个块级容器里，再用 text-align: center 居中内容。
常见错误：只给 <a></a> 加 display: block 然后设 margin: 0 auto——这能居中，但没必要多此一举；更简洁的方式是保持行内特性，靠父容器居中。
- 确保父容器是块级元素（如
<div>、<code><p></p>、<nav></nav>） - 给父容器加
style="text-align: center"或对应 CSS 类 -
<a></a>无需额外样式，保持默认display: inline即可
<div style="text-align: center"> <a href="https://example.com">点击访问</a> </div>
用 flex 实现更灵活的居中（推荐用于导航栏等场景）
当需要多个链接并排、且整体居中，或要控制间距、换行、对齐方式时，display: flex 更可靠，尤其在响应式布局中。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
注意：不要只对单个 <a></a> 设 display: flex，那是无效的；必须作用于包含它的父容器。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex+justify-content: center - 若希望链接水平排列且有间距，可加
gap: 1rem - 避免给
<a></a>设float或position: absolute，会破坏 flex 布局流
<nav style="display: flex; justify-content: center; gap: 1rem"> <a href="/home">首页</a> <a href="/about">关于</a> <a href="/contact">联系</a> </nav>
为什么 margin: 0 auto 不直接生效？
因为 <a></a> 默认是 display: inline，而 margin: 0 auto 只对设置了宽度的块级元素（或 inline-block）起作用。强行给它加 display: block 再设 margin: 0 auto 虽然能居中，但会让链接独占一行，失去行内语义和默认行为（比如与其他文字混排时会出问题）。
- 错误写法：
<a href="#" style="display: block; margin: 0 auto">链接</a>（除非你明确需要它独占一行） - 正确思路：居中的是“内容”，不是“元素自身”——所以控制父容器比改造子元素更自然
- 浏览器兼容性上，
text-align: center支持所有版本，flex在 IE10+ 可用（IE9 及以下需回退方案）
移动端或窄屏下容易忽略的细节
横向居中在桌面端看着正常，但缩窄屏幕后，如果链接文字过长或未设置换行控制，可能溢出容器或触发横向滚动。这不是居中失效，而是内容适应没处理好。
- 给父容器加
overflow-wrap: break-word或word-break: break-all（慎用后者） - 对
<a></a>设max-width: 100%防止超宽 - 使用
flex-wrap: wrap允许多行排列（配合justify-content: center，每行仍居中）
<div style="text-align: center; max-width: 100%"> <a href="#" style="display: inline-block; max-width: 100%; overflow-wrap: break-word">这是一个特别长的超链接文本</a> </div>实际项目中，
text-align: center 足够应付大多数单链接或简单导航场景；复杂布局建议优先用 flex，但得记得检查是否需要兼容老版本浏览器。真正容易翻车的，往往不是居中逻辑，而是没考虑文字长度变化和容器边界约束。
