Bootstrap 5 表格单元格文字垂直居中需为<td></td>或<th></th>添加align-middle类，因其作用于单元格而非<tr>，且对flex/grid容器内元素失效，应改用d-flex align-items-center。
Bootstrap 5 表格单元格里文字不居中？先确认是否用了 align-middle 在 <td> 或 <th> 上
默认情况下，Bootstrap 的 table 只控制水平对齐（text-align: left），垂直方向完全依赖浏览器默认的 vertical-align: middle —— 但这个行为在 <tr> 上无效，必须作用于单元格元素本身。很多人把 align-middle 加在 <tr> 上，结果没反应，就是这个原因。
正确做法是给每个需要居中的单元格加类：
<td class="align-middle">内容</td> <th class="align-middle">表头</th>
-
align-middle是 Bootstrap 5+ 的工具类，旧版本（v4）也支持，但 v3 不支持，需手动写 CSS - 它本质是设置
vertical-align: middle !important，所以能覆盖掉行内样式或某些组件库的干扰 - 如果表格嵌套了
<div>、<span>或设置了display: flex，align-middle可能失效——因为vertical-align对 flex 容器子项无效
表格里有图片或按钮时 align-middle 失效？检查父容器 display 类型
常见现象：文字能居中，但同一行的 <img> 或 <button> 悬在顶部。这是因为 vertical-align 的作用对象是「行内级」或「表格单元格」元素，一旦单元格里某个子元素设了 display: block（比如图片没设 align-middle，或按钮被重置了样式），整行基线就会偏移。
- 给图片加
class="align-middle"，和文字单元格一样处理 - 避免在
<td>内部用display: flex或display: grid—— 这时该用d-flex align-items-center替代align-middle - 若用了
table-responsive包裹，不影响align-middle，但注意滚动容器可能截断内容，造成视觉错觉
自定义高度行高下 align-middle 看起来还是偏上？可能是 line-height 或 padding 干扰
当单元格内容只有一行文字，但设置了较大 height 或 line-height，align-middle 仍按“内容盒”垂直居中，而非“行框”。这时候看起来像没起作用，其实是计算逻辑导致的视觉误差。
立即学习“前端免费学习笔记（深入）”；
- 优先用
padding控制上下留白，而不是靠拉高height+line-height - 如果必须设固定高度，配合
line-height等于高度，可让单行文字真正居中（但仅限单行） -
align-middle对多行文本有效，但不会改变行高分布；若要精确控制多行内容在单元格中居中，得用d-flex align-items-center+h-100
Vue/React 组件里动态渲染表格，align-middle 没生效？留意 SSR 和 class 绑定写法
服务端渲染（如 Nuxt、Next）或条件 class 绑定出错时，容易漏掉 align-middle。尤其在三元表达式或数组拼接 class 的场景下，很容易写成 :class="['table', isSpecial && 'table-striped']"，却忘了把 align-middle 加进去。
- Vue 中推荐写法：
:class="['align-middle', { 'bg-warning': isWarning }]" - React 中用
className={\`align-middle \${isWarning ? 'bg-warning' : ''}\`}，注意空格处理 - 如果用 CSS-in-JS（如 styled-components），
align-middle这类工具类不会自动注入，得手动引入 Bootstrap CSS 或复制对应样式
vertical-align 到底落在哪个节点、有没有被 !important 覆盖，比查文档快得多。 
