text-align: center与line-height配合可实现单行按钮文字水平垂直居中，但需按钮高度固定、内容不换行且line-height等于内容区高度；多行、带图标或响应式场景应改用display: flex+align-items: center。
text-align: center 和 line-height 配合能快速让按钮内单行文字水平+垂直居中，但前提是按钮高度固定、内容不换行；否则会错位或截断。
button 里文字不居中？先看 display 类型和盒模型
默认 <button> 是 inline-block 元素，它内部的文本属于“行内流”，所以 text-align: center 在 button 上直接生效——这是水平居中的基础。但垂直方向没作用，必须靠其他方式“推”上去。
常见错误现象：button { text-align: center; vertical-align: middle; } 写完发现没变化，因为 vertical-align 对 button 自身无效（它只影响 inline 或 table-cell 子元素的基线对齐）。
- button 默认有上下 padding 和 border，实际内容区高度 ≠ height 值
- 如果用
height+line-height，必须确保line-height等于“内容区高度”，而不是整个 button 的 height - 字体大小变化时，
line-height若设为无单位数值（如line-height: 2），会随 font-size 缩放；设为像素值（如line-height: 40px）才稳定
单行按钮文字：用 line-height = 内容区高度最轻量
适用于固定高、字号不变、纯文本按钮（比如导航栏、工具栏）。不用 flex，兼容性好到 IE8 都能跑。
立即学习“前端免费学习笔记（深入）”；
关键不是 button 的 height，而是它内部“可绘制文字的区域”高度。简单做法是清空 padding/border 后再设 height 和 line-height：
button {
height: 40px;
padding: 0;
border: none;
font-size: 16px;
line-height: 40px;
text-align: center;
}注意：如果保留默认 padding（比如 Chrome 下 button 默认有 6px 上下 padding），那 content area 高度其实是 40px - 12px = 28px，此时 line-height: 28px 才真正居中。
多行、自适应或带图标按钮：必须用 flex
一旦按钮里有换行、图标 <svg>、或者需要响应式缩放，line-height 就不可靠了——它会把整行当一个块撑开，导致图标错位、文字挤在一起。
这时候父容器（即 button 本身）设为 flex 容器，是最干净的解法：
button {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
padding: 0 16px;
font-size: 16px;
}几个要点：
- 不需要清除 padding，flex 会自动在 padding 区内居中
- 子元素如果是
<span>或<svg>，默认变成 flex item，vertical-align和line-height全部失效，别混用 - IE10+ 支持，2026 年已无兼容顾虑；若真要支持 IE9，得退回
display: table-cell方案（但 button 不允许设display: table-cell，得套一层<div>）
为什么 button 里加 margin: auto 没反应？
因为 margin: auto 在非 flex/absolute 容器中，只对块级元素自身水平居中有效（且需 width），对内部文字完全无效。更关键的是：button 是替换元素（replaced element），其内部行框（line box）不受 margin 影响。
有人试过 button > span { margin: auto; }，结果失败——因为 span 是行内元素，margin-top/bottom 本来就不生效，margin-left/right 在行内流里也只影响左右间距，不触发居中计算。
真正容易被忽略的一点：按钮文字是否“视觉居中”，还取决于字体本身的上伸部（ascender）和下伸部（descender）比例。某些中文字体（如思源黑体）基线偏高，即使技术上居中了，人眼也会觉得略偏下——这时微调 padding-top 比硬改 line-height 更可控。
