Bootstrap 表格内容居中：让数据更清晰

Bootstrap表格内容居中技巧：使用text-center类实现水平居中（table-centered类名应用于th和td元素）。使用d-flex和align-items-center类垂直对齐内容，并设置div高度匹配行高（适用于固定行高的表格）。

Bootstrap 表格内容居中：提升表格可读性

在 Bootstrap 表格中，内容居中是改善表格可读性和美观性的有效方法。通过 CSS 样式，可以轻松地将表格内容水平居中或垂直居中。

水平居中

要水平居中表格内容，请使用 text-center 类：

.table-centered {
  text-align: center;
}

然后将其应用于 <th> 和 <code><td> 元素：<pre class='brush:php;toolbar:false;'>&lt;table class=&quot;table-centered&quot;&gt; &lt;tr&gt; &lt;th&gt;头 1&lt;/th&gt; &lt;th&gt;头 2&lt;/th&gt; ... &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;数据 1&lt;/td&gt; &lt;td&gt;数据 2&lt;/td&gt; ... &lt;/tr&gt; &lt;/table&gt;</pre><p><strong>垂直居中</strong></p> <p>垂直居中表格内容需要更多步骤：</p> <ul><li>创建一个额外的 <code><div> 元素并将其包裹在 <code><th> 或 <code><td> 中。<li>为这个 <code><div> 元素应用 <code>d-flex 和 align-items-center 类，以垂直对其内容。

设置 <div> 的高度以匹配行高。<p>例如：</p><pre class='brush:php;toolbar:false;'>&lt;table&gt; &lt;tr&gt; &lt;th&gt; &lt;div class=&quot;d-flex align-items-center&quot; style=&quot;height: 50px;&quot;&gt; 头 1 &lt;/div&gt; &lt;/th&gt; ... &lt;/tr&gt; ... &lt;/table&gt;</pre><p>要自定义高度，只需调整 <code>style="height: 50px;" 中的值即可。

注意：

• 垂直居中仅适用于固定行高的表格。
• 如果表格内容包含元素（例如按钮或图像），请使用适当的 CSS 规则来使其水平或垂直居中。