vertical-align: middle 必须加在 td 上而非 button 上，因该属性仅对 inline/inline-block 元素有效且由父容器控制；td 需有足够高度（如显式 height 或 padding）才能显效，否则居中不可见。
vertical-align: middle 必须加在 td 上，不是 button
按钮默认是 inline-block 元素，它本身会受父级 td 的 vertical-align 控制。很多人把 vertical-align: middle 写在 button 上，结果没反应——因为该属性对块级元素（display: block）无效，而 button 在未显式设置前就是 inline-block，但它的对齐行为由父容器决定。
正确做法是直接给 td 设样式：
td { vertical-align: middle; }
常见错误现象：
-
button顶部贴边、底部悬空 - 同一行其他
td里文字居中了，但按钮不跟齐 - 加了
vertical-align: middle到button标签上完全没变化
为什么设置了 vertical-align 还是没效果？高度没撑开
vertical-align 是在“单元格可用高度”内对齐，如果 td 高度刚好等于按钮高度，那 middle 和 top 看起来一模一样。
解决方法（选其一）：
- 给
td显式设height（如height: 40px），确保有对齐空间 - 用
min-height+padding组合（min-height对vertical-align无效，但padding能撑高内容区） - 避免只靠
line-height：按钮不是纯文本，line-height对它不起作用
用 Flex 布局替代 vertical-align 更稳，但别混用
当 td 里不止一个按钮，或按钮旁还有图标、文字时，Flex 是更可控的选择：
td { display: flex; align-items: center; }
注意：
- 一旦给
td加了display: flex，vertical-align就失效了，两者不能共存 - 不需要额外设高度，Flex 会自动按内容撑开并居中
- IE10+ 支持，但 IE10/11 对
align-items: center在 table-cell 上的行为不一致，所以只在td上用 flex 是安全的
valign="middle" 还能用吗？能，但不推荐
HTML 属性 valign="middle" 在所有浏览器里都有效，比如：
<td valign="middle"><button>提交</button></td>
但它属于过时写法，W3C 已不鼓励使用。问题在于：
- 无法批量控制（每个
td都得手动加） - 和 CSS 样式冲突时优先级低，容易被覆盖
- 现代项目维护成本高，尤其配合框架时容易被重置
真正容易被忽略的是：垂直居中是否“可见”，取决于 td 是否有足够内部空间——哪怕你代码全对，高度不够，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
