按钮垂直居中首选flex布局（display: flex; align-items: center; justify-content: center），兼容多行、图标等复杂场景；单行文本可简化用line-height等于height，但换行即失效。
按钮内容不垂直居中，通常是因为默认的行内元素（如文字）在块级容器中缺乏明确的对齐控制。最常用、最可靠的两种方式是 line-height（适用于单行文本）和 flex（兼容多行、图标+文字等复杂场景）。
用 line-height 实现单行垂直居中
当按钮高度固定、且只含单行文字时，把 line-height 设为和按钮高度一致，文字会自然垂直居中。
- 确保按钮是
display: inline-block或block，且有明确的height - 设置
line-height: [相同数值]px，例如height: 40px; line-height: 40px; - 注意：若文字换行或内容变多，line-height 失效，此时需换 flex
用 flex 实现真正稳健的垂直（+水平）居中
给按钮设 display: flex，再用 align-items: center 垂直居中，justify-content: center 水平居中，一步到位，无副作用。
- 支持单行/多行文本、图标、图片、混合内容
- 无需预设高度，自动适应内容（也可配合
min-height控制最小尺寸） - 记得清除默认的
padding和border影响，避免视觉偏差
别忽略 box-sizing 和 padding 的干扰
有时看着“明明设了 flex 却还是偏上”，很可能是 box-sizing: content-box（默认值）下，padding 加在 height 外部，导致实际可布局区域变小。
立即学习“前端免费学习笔记（深入）”；
- 统一加
box-sizing: border-box，让 padding/border 包含在 width/height 内 - 检查是否意外设置了
vertical-align（对 inline-flex 元素仍有影响） - 避免同时用
line-height和flex，二者混用容易冲突
基本上就这些。line-height 简单快，flex 更通用——选哪个，看你的按钮是不是只放一行字。
