align-middle类必须加在<td>或<th>上而非<tr>上，因其本质是vertical-align: middle，而该CSS属性仅对单元格元素生效；加在<tr>上无效。
align-middle 类必须加在 <td> 或 <th> 上，加在 <tr> 上完全无效——这是最常踩的坑。
为什么 align-middle 加了没反应？
根本原因不是类写错了，而是作用对象错了。浏览器原生的 vertical-align 只对表格单元格元素（<td>、<th>）生效，对 <tr> 无效。很多开发者习惯给整行加类：
<tr class="align-middle"><td>A</td><td>B</td></tr>
这不会让内容居中。正确写法是逐个加到单元格上：
<td class="align-middle">A</td><td class="align-middle">B</td>
-
align-middle本质是vertical-align: middle !important，能覆盖多数干扰样式 - Bootstrap 4+ 支持该类；v3 不支持，需手动写 CSS
- 如果用了
bootstrap-table插件，它常偷偷给<tr>加height，会压制vertical-align计算，此时需禁用插件的高度控制或改用data-height配置
图片、按钮和文字混排时对齐失效怎么办？
文字居中了，但同一单元格里的 <img> 或 <button> 还悬在顶部？这是因为 vertical-align 对「块级子元素」不敏感——只要某个子元素设了 display: block（比如未加 align-middle 的图片），整行基线就会偏移。
立即学习“前端免费学习笔记（深入）”；
- 给图片也加
class="align-middle"，和文字单元格同理 - 避免在
<td>内部用display: flex或display: grid：此时align-middle失效，应改用d-flex align-items-center - 检查是否有父级
<div>包裹了单元格内容且设置了margin、padding或line-height，这些都会拉偏视觉基准
整行统一顶部/底部对齐，能不能不一个个加类？
可以，但仅限你主动把 <tr> 改成 Flex 容器的场景。原生表格的 <tr> 是 display: table-row，不识别 align-items-* 类。
- 若用 Flex 模拟表格布局（如
<div class="d-flex">替代<tr>），可直接在容器上加align-items-start或align-items-end - 真表格里，老老实实给每个需要对齐的
<td>加类更稳妥，兼容性无风险 - 注意：
align-baseline适合图文混排，能让图标和文字按基线对齐，比align-middle更自然
表格内容和表头不对齐（尤其固定表头时）
常见于 bootstrap-table 或自定义固定表头方案：滚动后列宽错位、文字上下偏移。这不是对齐类的问题，而是表格渲染机制被破坏。
- 强制启用固定布局：
.table { table-layout: fixed; }，防止浏览器按内容重算列宽 - 监听窗口缩放：
$(window).on('resize', () => $('#myTable').bootstrapTable('resetView')) - 避免在
<th>和<td>中混用不同高度的内联元素（如一个含h-100的按钮，另一个纯文本），会导致行高不一致
最容易被忽略的是：垂直对齐永远是「内容相对于单元格自身边界」的定位，不是相对于整张表。调错目标容器，再多个 !important 也没用。
