直接设line-height等于按钮高度是单行文本垂直居中的最可靠方式，但需确保无height以外的干扰（如额外padding）、配合white-space:nowrap，且不与flex布局混用。
直接设 line-height 等于按钮高度，是让单行文本在 Bootstrap 按钮中真正垂直居中的最可靠方式——但前提是别碰 height 以外的干扰项。
为什么 button 里文字不居中？常见错误是 height 和 line-height 不匹配
Bootstrap 默认按钮（如 .btn）靠 padding 控制高度，内部文字靠 line-height 和 padding 共同“模拟”居中。一旦你加了 style="height: 40px;"，而没同步设 line-height: 40px，浏览器就按默认行高渲染，文字立刻贴顶。
-
height: 40px单独写 → 文字偏上，像被压扁 -
height: 40px; line-height: 40px;→ 单行文字视觉正中（需配合white-space: nowrap） - 如果按钮里还加了
padding，实际内容区变小，line-height就得按内容区高来设，不是按总高
什么时候必须用 line-height？哪些场景它会失效
line-height 居中只对单行、固定高度、无额外 padding/border 干扰的容器有效。一旦条件破一个，效果就不可靠。
- 多行文本：
line-height会让每行都拉高，整体下沉，不是居中 - 用了
display: flex：line-height被忽略，flex 容器只认align-items - 字体过大或用了 icon font：上下留白（ascent/descent）可能让视觉中心偏移，可微调
line-height: 42px补偿 - 响应式场景下用
vh或em设高：值动态变化，line-height很难同步，建议改用min-height+padding组合
按钮含图标时，line-height 还管用吗？怎么对齐图标和文字
不管有没有图标，line-height 都只控制文字所在行框的垂直位置；图标默认是 inline 元素，按 baseline 对齐，会比文字低一截——所以光调 line-height 解决不了图标错位问题。
- 给图标加
align-middle类（如<i class="bi bi-download align-middle"></i>），它把图标基线拉到父容器 x-height 中间，和文字自然对齐 - 如果图标放大了（比如
font-size: 1.5rem），可能因像素渲染偏差轻微下沉，加margin-top: -1px补偿即可 - 别给整个按钮设
display: flex再配align-items: center——这会破坏按钮语义，且旧版 Safari 可能缩窄点击热区
真正麻烦的不是算 line-height 值，而是你是否清楚按钮里是单行还是多行、有没有图标、要不要兼容老浏览器、以及父容器高度是否稳定——这几个变量一动，line-height 就容易失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
