line-height不推荐用于按钮文字垂直居中，因其依赖固定像素、易受字体缩放/图标基线/可变字体干扰；推荐用padding+height或display:flex实现真正可靠的盒模型级居中。
line-height 和 padding 都能实现按钮文字垂直居中，但适用场景和副作用完全不同——别一上来就设 line-height: 40px，尤其当按钮用在响应式布局或字体缩放场景下，容易出错。
按钮文字垂直居中：为什么 line-height 在多数按钮里不推荐？
很多教程直接让 line-height 等于按钮高度，这在纯静态、固定字号的按钮上看似有效，但实际项目中问题明显：
-
line-height是基于当前字体大小计算的行间距，不是绝对像素“锚点”；如果用户开启系统字体放大、或你用了rem/em动态字号，line-height: 40px会把文字压扁或撑开 - 按钮内含图标（如
<span>●</span>提交）时，line-height会让图标和文字基线错位，视觉上“飘”在上方 - 使用
font-feature-settings或可变字体时，line-height的渲染行为更不可控
真正稳妥的按钮文字垂直居中：用 padding + 显式高度
给按钮设固定上下 padding，再配合 height 或 min-height，比硬调 line-height 更可控：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
button {
height: 40px;
padding: 0 16px;
font-size: 14px;
line-height: 1; /* 关键：重置为无额外行高 */
border: none;
background: #007bff;
color: white;
}
- 上下
padding值相等（如padding: 12px 16px），文字自然垂直居中，不受字体变化影响 -
line-height: 1必须显式设置，否则浏览器默认值（通常 1.2 左右）会让文字在padding内偏上 - 若按钮需支持多行文字（比如带换行符的提示按钮），改用
min-height+display: flex更安全
当按钮需要兼容老浏览器或动态内容时，加一层保险
某些旧版 Safari 或 Android Webview 对 padding 渲染有细微偏差，这时可叠加 vertical-align: middle（仅对 inline 或 inline-block 元素生效）：
button {
display: inline-block;
vertical-align: middle;
padding: 12px 16px;
font-size: 14px;
}
- 必须搭配
display: inline-block，否则vertical-align无效 - 父容器不能是
flex或grid，否则vertical-align被忽略 - 仅作为 fallback，现代项目优先用
flex布局（见下条）
现代按钮的最佳实践：用 display: flex 一劳永逸
如果你不需要支持 IE9 及更早版本，display: flex 是按钮文字垂直居中的终极解法：
button {
display: flex;
justify-content: center;
align-items: center;
padding: 0 16px;
height: 40px;
font-size: 14px;
}
- 文字、图标、SVG 子元素全部自动居中，无需关心
line-height或基线对齐 - 支持任意字号缩放、多行文本、甚至子元素
transform动画 - 注意：如果按钮内嵌
input或select，它们可能破坏flex流，需单独包裹
最容易被忽略的一点：按钮的「视觉居中」和「语义居中」不是一回事。用 line-height 撑出来的居中，只是视觉上看起来在中间；而 flex 或 padding 实现的是盒模型层级的真实居中——这对可访问性（如屏幕阅读器聚焦位置）、高对比度模式下的渲染都更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
