按钮文字不居中主因是height与line-height、padding冲突；应优先用btn-lg/btn-sm类，或仅设上下padding；若强制height需同步设等值line-height；图标错位加align-middle；响应式场景避免vh/em设高，改用min-height或布局控制。
按钮高度固定后文字不居中？检查 line-height 和 padding 是否冲突
bootstrap 默认按钮（如 .btn）靠 padding 控制高度，内部文字靠 line-height 与 padding 共同实现视觉垂直居中。一旦你用 height 强制设高，而没同步调整 line-height 或清空默认 padding，文字就会偏上或偏下。
常见错误现象：<button class="btn btn-primary" style="height: 40px;">提交</button> —— 文字紧贴顶部，像被“压扁”了。
- 别直接写
height: 40px，优先用 Bootstrap 内置尺寸类，比如btn-lg/btn-sm，它们已协调好padding和line-height - 若必须自定义高度，建议只设
padding-top和padding-bottom，让内容自然居中；例如：style="padding-top: 10px; padding-bottom: 10px;"（总高 ≈ 字体大小 + 上下 padding） - 如果非要用
height，务必让line-height等于该值（且字体不能换行），否则单行文字不会真正在中间：例如style="height: 40px; line-height: 40px;" - 注意：
vertical-align对按钮本身无效——它只作用于 inline 级元素在行内上下文中的对齐，不是按钮内部文字的控制方式
btn 里图标+文字组合时垂直错位？统一用 align-middle 类
当按钮内同时有 <i></i> 图标和文字（如 <button class="btn"><i class="bi bi-download"></i> 下载</button>），图标默认 baseline 对齐，文字会“吊”在图标下方，看起来整体下沉。
解决方法很简单：给图标加 align-middle，它会把图标基线拉到父容器 x-height 中间，和文字自然对齐。
- 正确写法：
<i class="bi bi-download align-middle"></i>，文字不用加类 - 如果图标用了
font-size放大，可能需微调margin-top: -1px补偿渲染像素差（仅极少数字体/缩放下出现） - 避免给整个按钮设
display: flex再用align-items: center——这会破坏按钮默认的 inline 布局语义，且在旧版 Safari 中可能触发按钮点击热区收缩
响应式场景下按钮高度忽高忽低？别用 vh 或 em 直接设高
有人为适配不同屏幕，给按钮写 style="height: 6vh;" 或 height: 2em;，结果在小屏上按钮被压缩、文字溢出，在大屏上又过大。这不是居中问题，而是高度失控导致的垂直空间失衡。
- Bootstrap 的
.btn本就是响应式设计，其padding和font-size已随断点变化；强行覆盖高度会切断这套响应链 - 真正需要“等高按钮组”时，应该用容器级控制：给父容器（如
.btn-group）加d-flex flex-column，再给每个按钮加flex-grow-1，让它们均分高度 - 若按钮必须严格等高且含文字，推荐用
min-height替代height，例如min-height: calc(2.5rem + 2px)（兼容边框），留出文字撑开余量
自定义按钮背景色后文字发虚？检查 color 和 text-shadow 是否被覆盖
用 style="background-color: #2c3e50;" 覆盖按钮背景后，文字有时显得灰暗、不锐利，甚至像“浮”在上面——这不是垂直居中失效，而是对比度或渲染层级问题。
- Bootstrap 按钮的
color是根据背景自动计算的（通过 Sass 变量），手写背景色时必须同步指定color，例如：color: #fff; - 某些深色背景下，浏览器会启用 subpixel 渲染优化，若按钮有
transform或will-change，可能触发模糊；移除这些属性可验证 - 别用
text-shadow: 0 0 1px rgba(0,0,0,.5);强行“加粗”文字——它会让文字边缘发虚，尤其在 Retina 屏；改用font-weight: 600更可靠
实际最常被忽略的一点：按钮高度是否真的需要“固定”？
多数所谓“高度不一致”，其实是卡片或栅格列高度不同造成的视觉错觉。与其锁死按钮高度，不如统一卡片 h-100 + .card-body.d-flex.flex-column + 底部按钮 mt-auto，让布局逻辑接管高度一致性。
