flex比line-height更可靠，因flex按内容盒直接分配空间，不受行高、字体度量或基线影响，对图标、多行文字、不同字体及各浏览器均一致生效。
line-height设为数值时按钮文字不居中？
直接用 line-height 控制按钮内文字垂直居中，看似简单，但多数时候会偏上或偏下——尤其当按钮有上下 padding、边框或字体用了非默认 font-family 时。line-height 是基于“行盒”的高度计算的，而按钮（button）默认是 inline-block，其基线对齐逻辑和纯文本不同，容易出偏差。
实操建议：
- 避免单独依赖
line-height居中；优先用display: flex; align-items: center; justify-content: center; - 若必须用
line-height，需确保按钮无上下padding、无border，且font-size和line-height同单位（推荐无单位数值，如line-height: 1.5;） - 遇到图标+文字混合按钮，
line-height更不可靠，flex 是唯一稳解
CSS变量怎么安全地控制line-height？
用 CSS 变量（--btn-line-height）替代写死的 line-height 值，确实方便统一调整，但变量本身不解决居中逻辑问题，反而可能放大误差——比如在响应式中，一个变量值在小屏下刚好，大屏下就露馅。
实操建议：
- 定义变量时，用无单位数值：
:root { --btn-line-height: 1.4; }，避免px或em引入缩放干扰 - 只在明确「纯文字按钮 + 固定高度 + 无 padding」场景下用变量驱动
line-height - 搭配
height使用时，务必验证：height必须 ≥font-size × line-height，否则文字会被截断
按钮高度变化时line-height还顶用吗？
一旦按钮高度由 min-height、fit-content 或内容撑开，line-height 就彻底失效——它只控制行盒内部对齐，不参与容器尺寸分配。
常见错误现象：
- 按钮里加了图标（
svg或img），文字突然上移 - 响应式中按钮宽度变窄，换行后
line-height对第二行无效 - 使用
rem设置font-size，但未同步调整line-height变量，导致比例错乱
实操建议：
- 高度不固定时，放弃
line-height，改用display: grid; align-items: center;或 flex - 如果坚持用
line-height，请把按钮设为固定height，并用box-sizing: border-box;锁死盒模型
为什么用flex比line-height更可靠？
flex 居中不依赖行高、字体度量或基线，它直接按容器内容盒（content box）做空间分配，对图标、多行文字、不同字体都一致生效。而 line-height 的行为在 Chrome/Firefox/Safari 中对某些字体（如 system-ui）仍有细微差异。
实操建议：
- 给按钮加
display: inline-flex;（保留内联流特性）或display: flex;（块级） - 必加
align-items: center;，文字自然垂直居中；justify-content: center;处理水平 - 注意：老版本 iOS Safari（button 上的 flex 支持不完整，需加
-webkit-appearance: none;
实际项目里最常被忽略的点：按钮的 vertical-align 默认是 baseline，哪怕内部用 flex 居中了，多个按钮并排时仍可能因基线对齐产生视觉错位——这时候得统一设成 vertical-align: middle; 或 top;。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
