Bootstrap表格内容居中技巧：使用text-center类实现水平居中（table-centered类名应用于th和td元素）。使用d-flex和align-items-center类垂直对齐内容，并设置div高度匹配行高（适用于固定行高的表格）。
Bootstrap 表格内容居中：提升表格可读性
在 Bootstrap 表格中，内容居中是改善表格可读性和美观性的有效方法。通过 CSS 样式，可以轻松地将表格内容水平居中或垂直居中。
水平居中
要水平居中表格内容，请使用 text-center 类：
1
2
3
.table-centered {
text-align: center;
}
登录后复制
然后将其应用于
和 元素：1
2
3
4
5
6
7
8
9
10
11
12
<table class="table-centered">
<tr>
<th>头 1</th>
<th>头 2</th>
...
</tr>
<tr>
<td>数据 1</td>
<td>数据 2</td>
...
</tr>
</table>
登录后复制
垂直居中
垂直居中表格内容需要更多步骤：
创建一个额外的 元素并将其包裹在 或
中。
为这个 元素应用 d-flex 和 align-items-center 类，以垂直对其内容。
设置 的高度以匹配行高。
例如：
1
2
3
4
5
6
7
8
9
10
11
<table>
<tr>
<th>
<div class="d-flex align-items-center" style="height: 50px;">
头 1
</div>
</th>
...
</tr>
...
</table>
登录后复制
要自定义高度，只需调整 style="height: 50px;" 中的值即可。
注意：
垂直居中仅适用于固定行高的表格。 如果表格内容包含元素（例如按钮或图像），请使用适当的 CSS 规则来使其水平或垂直居中。