最可靠方案是父容器设 display: flex + align-items: center + 明确高度；line-height 仅适用于单行静态场景；vertical-align 对块级按钮无效，且 baseline 对齐易致视觉偏下。
用 align-items: center 实现文字+按钮垂直居中最可靠
只要父容器是块级元素且高度明确，display: flex + align-items: center 是目前兼容性好、行为可预测的首选方案。它不依赖文字行高或单行假设，能自然处理换行文字、不同字号按钮、图标混合等场景。
常见错误是只加 align-items 却忘了设 display: flex，或者父容器没设高度导致“居中”失效（flex 居中需要参考容器高度）。
- 父容器必须有明确高度（如
height: 60px或min-height），否则align-items: center无参照 - 子元素无需额外设置
vertical-align或line-height - 若需水平居中，同时加
justify-content: center
.container {
display: flex;
align-items: center;
height: 60px;
border: 1px solid #ccc;
}
.button {
margin-left: 8px;
}
line-height 只适用于单行纯文本+固定高度场景
line-height 能让单行内联内容（如文字+<button></button>）在行框内垂直居中，但前提是：容器高度 = line-height 值，且所有子元素都是 vertical-align: baseline（默认值）。一旦文字换行、按钮带 padding 或字体不一致，就容易错位。
它本质是“行高对齐”，不是真正的容器居中，所以响应式或动态内容中风险高。
立即学习“前端免费学习笔记（深入）”；
- 仅推荐用于静态标题栏、标签页等高度严格可控的单行场景
- 按钮需设
vertical-align: middle，否则可能和文字基线对不齐 - 若按钮有上下 padding，实际视觉位置会偏高，需手动调
margin-top
.header {
height: 44px;
line-height: 44px;
font-size: 14px;
}
.header button {
vertical-align: middle;
padding: 6px 12px;
}
为什么不用 vertical-align: middle 单独设按钮？
vertical-align 只对 inline 或 table-cell 元素生效，对块级按钮无效。即使强行设 display: inline-block，它的对齐基准仍是行框的基线（baseline），而文字和按钮的 baseline 位置不同——按钮通常偏低，看起来像“没居中”。
典型现象：按钮底部贴着文字下边缘，顶部留白明显。这不是 bug，是 baseline 对齐的正常表现。
- 加
vertical-align: middle后仍偏下？大概率是按钮自身padding或border影响了行框计算 - 想靠
vertical-align居中，必须确保父容器是line-height驱动的行框环境 - 现代布局中，它已基本被 flex 取代，仅用于微调内联元素细节
移动端或老浏览器要注意什么？
Flex 在 iOS Safari 8+、Android Browser 4.4+ 支持良好，但 IE10/11 需加 -ms- 前缀（display: -ms-flexbox），且 align-items 行为略有差异。如果必须支持 IE9 及以下，只能退回到 table-cell + vertical-align: middle 方案，但语义失真、调试困难。
真正容易被忽略的是：flex 容器内的按钮若设了 white-space: nowrap 或 min-width，可能撑开父容器导致高度变化，进而破坏居中效果——建议用 max-width: 100% 或 flex-shrink: 1 控制溢出。
