17370845950

最可靠方案是父容器设 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 能让单行内联内容（如文字+）在行框内垂直居中，但前提是：容器高度 = 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 控制溢出。