button里套a标签会导致垂直居中失效，根本原因是a为行内元素，不响应height和line-height，且浏览器对其基线对齐逻辑与button不同；正确做法是避免嵌套，改用button配合JavaScript跳转，或用flex布局实现真正居中。
button 里套 a 标签会导致垂直居中失效
很多人想用 <a href="#">提交</a> 加 border-radius: 30px 做椭圆按钮，但文字总偏上或压底——根本原因不是 CSS 写错了，而是 <a></a> 默认是行内元素，不响应 height 和 line-height，且浏览器对它的基线对齐逻辑和 <button></button> 不同。
更麻烦的是：若强行给 a 设 display: inline-block + height + line-height，在 Firefox 里仍可能因 ::-moz-focus-inner 多出 2px 上边距；Safari 对 vertical-align 的处理也容易飘。
- 别用
<a></a>当按钮容器，语义错误，样式难控 - 必须跳转时，直接给
<button onclick="location.href='xxx'"></button>或监听 click 后window.location - 如果非要用
<a></a>（比如 SEO 或 SSR 场景），就把它包进<button></button>，再设display: flex——但注意：按钮不能嵌套交互元素，得用role="link"+tabindex="0"补无障碍
单行文字椭圆按钮：height + line-height 最稳
适用于「登录」「下载」这类固定高度、纯文本、无图标、不换行的场景。它兼容 IE11，代码轻，不依赖 Flex。
关键点不是“设了 line-height 就能居中”，而是三者必须严格一致：
立即学习“前端免费学习笔记（深入）”；
-
height必须显式声明（比如height: 40px），不能是auto或min-height -
line-height必须和height数值完全相等（line-height: 40px） -
font-size要小于height，否则文字撑高导致错位；建议控制在height × 0.6 ~ 0.7区间（如height: 40px时，font-size: 16px较安全） - 加
padding: 0，避免内边距干扰计算
示例：
button.oval {
height: 40px;
line-height: 40px;
font-size: 16px;
padding: 0;
border-radius: 20px;
border: none;
background: #007bff;
color: white;
}
含图标/多行/响应式椭圆按钮：必须用 display: flex
一旦按钮里有 <svg></svg>、<img alt="HTML怎么让超链接文字在椭圆形按钮里居中" >，或文案可能折行（如「立即免费试用」在小屏换行），line-height 就彻底失效。这时唯一可靠方案是把按钮当 Flex 容器用。
注意：不能只写 display: flex，缺了下面任意一条都会翻车：
- 必须同时设
justify-content: center（水平居中）和align-items: center（垂直居中） - 父容器（即 button 自身）要有明确高度，
border-radius: 30px才能生效为椭圆，否则只是圆角矩形 - 内部图标不要设
vertical-align，Flex 下它会被忽略；也不要给图标加margin-top/bottom微调——那是倒退到 bug 模式 - 如果用了 Font Awesome 的
<i></i>，确保它被包裹在固定尺寸容器里（如width: 24px; height: 24px;），否则图标视觉大小不一，椭圆看起来歪
示例（带 SVG 图标）：
button.icon-oval {
display: inline-flex;
justify-content: center;
align-items: center;
height: 44px;
padding: 0 20px;
border-radius: 22px;
background: #28a745;
border: none;
color: white;
}
button.icon-oval svg {
width: 18px;
height: 18px;
margin-right: 8px;
}
Firefox 和 Safari 的 focus outline 偏移问题
哪怕你用对了 flex，点一下按钮后文字突然上移 1–2px？大概率是浏览器 focus outline 的默认内边距在作祟。Firefox 会偷偷加 padding，Safari 在某些字体下会重算基线。
必须加这两条重置：
-
button:focus { outline: none; }—— 移除原生焦点框（后续可用box-shadow自定义） -
button::-moz-focus-inner { border: 0; padding: 0; }—— Firefox 专属清零
别漏掉 ::-moz-focus-inner，它不写在开发者工具的 computed 面板里，但真实存在，且只影响 Firefox。
