圆角超链接按钮居中需先解决a标签行内特性：设display:block/inline-block或用flex父容器，再配合width、text-align或transform实现；border-radius需尺寸可控才能视觉与布局双居中。
带圆角的超链接按钮（即 <a></a> 标签加 border-radius）居中，本质不是“给按钮加圆角再居中”，而是先解决 <a></a> 的显示行为问题，再选对居中路径。直接套用 margin: 0 auto 或 text-align: center 常常失效，原因几乎都出在元素类型和上下文上。
为什么 <a></a> 默认不响应 margin: 0 auto
<a></a> 是行内元素，没有尺寸、不占块级空间，margin: 0 auto 对它完全无效。你看到按钮“没动”，不是样式写错了，是浏览器根本没执行这个规则。
- 必须显式设
display: block或display: inline-block才能有宽高概念 - 若选
display: block，还需配width（比如width: 160px），否则margin: 0 auto仍不生效 - 若选
display: inline-block，则不能靠自身margin: 0 auto居中，得靠父容器text-align: center - 父容器若已是
display: flex或display: grid，上述两种方式都会被覆盖，margin和text-align都静默失效
用 display: flex 父容器最稳，但要注意高度
这是现代项目里最不易翻车的方案，尤其适合带 border-radius 的 <a></a> 按钮需要水平+垂直居中时。
- 给
<a></a>的**直接父容器**加display: flex、justify-content: center - 若需垂直居中，再加
align-items: center—— 但父容器必须有高度，比如min-height: 100vh或height: 60px -
<a></a>自身不用改display，也不用设width，哪怕内容是图标+文字也能自动撑开并居中 - 圆角样式直接写在
<a></a>上：border-radius: 8px或border-radius: 50%（后者需宽高等比）
用 text-align: center 最快，但只管水平方向
适合按钮保持默认交互行为、只需水平居中、且父容器是普通块级流的场景，兼容性最好。
立即学习“前端免费学习笔记（深入）”；
- 只在
<a></a>的父容器（如<div>）上写 <code>text-align: center -
<a></a>自己加display: inline-block，并设padding和border-radius - 垂直位置靠父容器的
line-height或padding-top/padding-bottom调整，不是靠text-align - 别在
<a></a>上写text-align: center—— 它只控制内部文字对齐，不影响按钮盒子位置 - 父容器设
position: relative -
<a></a>设position: absolute，再用top: 50%、left: 50%、transform: translate(-50%, -50%) - 圆角直接加在
<a></a>上，border-radius不影响定位逻辑 - 注意：该方式会让按钮脱离可访问性流，记得加
aria-label和键盘焦点支持
绝对定位 + transform 适合悬浮或固定位置的圆角按钮
比如右下角的“回到顶部”链接按钮，或模态框里的操作按钮，需要脱离文档流时用这个。
真正容易被忽略的是：圆角按钮的“视觉居中”和“布局居中”可能不是一回事。比如 border-radius: 50% 要求宽高等比，如果只设了 width 没控 height，或者用了 padding 导致实际尺寸浮动，看着居中了，其实容器边缘已经错位。先锁死尺寸再居中，比反复调 margin 或 top 更可靠。
