按钮垂直居中核心在于控制层级：父容器用flex需设高度并加align-items:center；表格中需在td设vertical-align:middle；按钮内部居中则让button自身display:flex并align-items:center；旧浏览器可用absolute+transform方案。
父容器用 flex 实现按钮垂直居中
这是最直接、最可控的方式，尤其适合现代项目。关键不是给按钮加样式，而是让它的**直接父容器**变成 flex 容器，并启用交叉轴对齐。
常见错误现象：按钮没动、只水平居中、整个页面错位——往往因为父容器没设高度，或忘了写 align-items: center。
- 父容器必须有明确高度（如
height: 400px或min-height: 100vh），否则align-items: center没参照系 - 给父容器加
display: flex和align-items: center，justify-content: center可选（需要水平居中时才加） - 按钮本身不用改
display，保持默认inline-block即可；加了display: block也无妨，但没必要 - 避免在父容器上同时写
text-align: center——它对垂直方向无效，还可能干扰 flex 行为
表格单元格里按钮垂直居中要设 vertical-align 在 td 上
很多人把 vertical-align: middle 写在 button 标签上，结果完全没反应——因为这个属性只对 inline/inline-block 元素生效，且由**父容器控制**，不是子元素自己决定的。
真正起作用的是 td 的样式，不是按钮的。
立即学习“前端免费学习笔记（深入）”；
- 必须写
td { vertical-align: middle; }，而不是button { vertical-align: middle; } - 如果按钮看起来还是没居中，大概率是
td高度不够——vertical-align是在“可用高度”内对齐，若td高度刚好等于按钮高度，middle 和 top 看不出区别 - 解决方法：显式设
height（如height: 48px），或用padding撑开内容区；别依赖line-height，它对按钮内含 padding 或图标时基本失效 - 如果
td里不止一个按钮，或还要放图标，建议直接改用td { display: flex; align-items: center; }，更稳定
按钮内部图标或文字垂直居中用 display: flex + align-items: center
按钮里塞个 SVG 或小图标后，它总比文字高一截？这不是 bug，是浏览器按基线（baseline）对齐导致的视觉偏差。硬调 margin-top 或 vertical-align 容易随字体、字号崩掉。
正确做法是让按钮自己成为 flex 容器。
- 给
button加display: flex和align-items: center，图标和文字自动垂直居中 - 用
gap: 0.5rem控制间距，比margin-left更稳，不触发外边距合并 - 图标尺寸推荐用
height: 1em或width: 1.2em，让它随字体缩放；避免固定像素值（如16px），否则响应式下容易错位 - 如果按钮含多行文字，
align-items: center会让整块内容垂直居中；如需每行独立对齐，得换 grid 或重构结构
兼容旧浏览器时用 position: absolute + transform
当目标环境包括 IE10 或某些嵌入式 WebView（比如老版 Cordova、部分国产浏览器内核），flex 支持不稳定，就得退回绝对定位方案。
它不依赖父容器 display 类型，也不要求知道按钮宽高，但有几个硬性前提不能漏。
- 父容器必须有
position: relative，否则absolute会相对于 body 定位 - 按钮自身要写全三行：
position: absolute、top: 50%、left: 50%，再加transform: translate(-50%, -50%) - IE9 需额外加前缀：
-ms-transform: translate(-50%, -50%) - 按钮内容动态变化（比如文字长度浮动）时，这个方案依然稳定；但频繁重排场景下，
transform比 flex 略轻量
td 而不是 button；按钮内部居中则要让按钮自己变成容器——这些层级关系一旦搞反，调试就会陷入死循环。 
