按钮内 spinner-border 居中需为按钮设 position: relative 和 overflow: hidden，spinner 用绝对定位配合 transform(-50%,-50%)，尺寸用 em 单位并同步调整 border-width，文字用 visibility: hidden 控制占位，动画通过 opacity 与 visibility 错开过渡时机。
按钮里 spinner-border 怎么居中不偏移
直接往 <button></button> 里加 spinner-border 类，90% 会偏右、上浮、或整个按钮被撑高——不是类写错了，是它默认作为行内元素参与流式布局，而按钮高度由 padding 和 font-size 动态决定，两者根本不联动。
必须给按钮自身加定位上下文：
-
<button></button>上设style="position: relative; overflow: hidden;"（不能只靠外层 div） -
spinner-border元素必须用绝对定位：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 宽高别写
2rem这种固定值，改用em单位：btn-md对应width: 1.5em; height: 1.5em，btn-sm用1.2em - 别用
margin: auto或text-align: center，它们对绝对定位无效
为什么 spinner-border 在 btn-lg 里总靠下
Bootstrap 没提供 spinner-border-lg 类，硬套 spinner-border 会导致旋转中心与按钮视觉中心错位——因为 2rem 高度在大按钮里太小，且 border-width 没同步放大，边缘模糊抖动。
正确做法是手动调尺寸，且必须同步控制边框粗细：
- 对
btn-lg，推荐内联样式：style="width: 1.5rem; height: 1.5rem; border-width: 0.1875rem;" - 若放大到
4rem，border-width至少配0.5rem，否则旋转时像素错位 - 绝对禁止用
transform: scale()整体缩放：会破坏点击热区，导致 touch 事件偏移
Spinner 居中后文字还上跳怎么办
这是原始文字节点没处理好。spinner 绝对定位“盖”住了文字，但文字本身仍占流式空间，会把按钮内容区往上顶。
关键不是删掉文字，而是让它“隐身但占位”：
- 把按钮文字包在
<span class="btn-text"></span>里（保留图标、data-*等结构） - 加载时设
btn.querySelector('.btn-text').style.visibility = 'hidden'，不是display: none - 恢复时切回
visibility: visible，避免按钮宽度突变 - 移动端额外加
btn.style.pointer-events = 'none'，防 touch 穿透到下层
淡入淡出动画一闪或卡顿
直接切 display: none/block 或反复操作 style.opacity，都会触发重排重绘，导致跳帧。
平滑过渡靠的是 opacity 和 visibility 双属性错开时机：
- 初始状态：
opacity: 0; visibility: hidden; - 淡入时加类
showing：opacity: 1（transition: opacity 0.2s），visibility: visible（transition-delay: 0s） - 淡出时移除该类：
opacity: 0同步触发，但visibility: hidden延迟0.2s才生效 - JS 只需切换类名，别手动操作
style——漏掉任一属性，动画就断
最易被忽略的是：所有这些样式必须写在 Bootstrap 自带 CSS 之后，否则会被覆盖；overflow: hidden 也得始终开着，不然 spinner 边缘可能溢出按钮边界。
