超链接组是行内元素，用text-align: center最直接；若需水平垂直居中则用display: flex配合justify-content和align-items；避免对设margin: 0 auto或使用废弃的align属性。
超链接组是行内元素，用 text-align: center 最直接
超链接（<a></a>）默认是行内元素，多个 <a></a> 并排写在 HTML 里，天然形成“一行”。要让整组链接在父容器中水平居中，只需给父容器加 text-align: center ——不是给 <a></a> 自身加，而是它的直接父级（比如 <div> 或 <code><nav></nav>）。
常见错误现象：<a style="margin: 0 auto"></a> 完全无效，因为 margin: 0 auto 对行内元素不生效；align="center" 属性已废弃，现代浏览器可能忽略。
- 父容器必须是块级元素（如
<div>），且未设置 <code>float或position: absolute - 如果父容器有 padding 或 border，居中仍以内容区为基准，不影响逻辑
- 该方法只控制水平居中；若需垂直居中（比如放在高容器里），得配合
line-height（单行）或display: flex（见下一条）
需要垂直居中或更灵活控制时，改用 display: flex
当超链接组要放在一个固定高度的导航栏、页脚或卡片中，并要求上下也居中，text-align 就不够了。这时把父容器设为 Flex 容器是最稳妥的选择。
示例：一个高 60px 的导航区域，里面几个链接水平+垂直居中：
立即学习“前端免费学习笔记（深入）”；
.nav-links {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
-
justify-content: center控制水平居中，align-items: center控制垂直居中 - 子
<a></a>无需设display: block或其他样式，Flex 会自动处理 - 如果链接之间需要间距，优先用
gap: 16px（比margin更干净），IE 不支持则退回到margin-right+ 最后一项清除 - 注意：父容器必须有明确高度（或能撑开的高度），否则
align-items: center可能无视觉效果
响应式场景下避免用固定宽度 + margin: 0 auto
有人试图把一整组 <a></a> 包进一个 <div class="link-group">，再给这个 <code>div 设 width: 400px; margin: 0 auto。这在桌面端看似可行，但极易出问题：
- 链接文字长度变化（比如中英文切换）、字体缩放、屏幕变窄时，
400px会溢出或留白过大 - 移动端小屏下，固定宽度常导致横向滚动或文字折行，破坏“一行”前提
-
margin: 0 auto要求元素是块级且非绝对定位——虽然div满足，但代价是放弃流式适应性 - 真正需要限制宽度时，应改用
max-width: 100%配合text-align: center，而非死宽度
容易被忽略的细节：链接换行与 white-space
默认情况下，多个 <a></a> 在窄容器里会自动折行——你本想保持“一行”，结果变成两行甚至三行，居中也就失效了。这不是居中逻辑错了，而是布局被破坏了。
- 加
white-space: nowrap到父容器，强制所有链接保持单行（配合overflow-x: auto或text-overflow: ellipsis处理溢出） - 但要注意：移动端手指滑动体验、可访问性（屏幕阅读器对
nowrap的处理）、SEO（过长链接影响语义）都可能受影响 - 更健壮的做法是用 Flex +
flex-wrap: nowrap（默认就是不换行），它比white-space更可控，也兼容老一点的 Flex 实现
