使用CSS的text-align和vertical-align属性可实现表格内容居中。首先设置text-align: center实现水平居中，作用于table、th、td或单个单元格；其次通过vertical-align: middle实现垂直居中，仅适用于td和th标签。推荐使用外部CSS类统一控制样式，如定义.center-all类应用到单元格，避免依赖浏览器默认行为，确保跨浏览器一致性。

要让HTML表格中的内容居中对齐，可以通过CSS来设置文本的对齐方式。默认情况下，表格内容通常是左对齐的，但使用简单的CSS样式即可实现水平和垂直居中。

1. 水平居中：text-align

控制表格内文字的水平对齐方式，使用 text-align: center; 可使内容在单元格内水平居中。

可以应用于整个表格、某一行或单个单元格：

• 对所有单元格生效：
  table, th, td { text-align: center; }
• 仅对表头居中：
  th { text-align: center; }
• 只对特定单元格设置：
  在标签中添加内联样式 <td style="text-align:center;"> <h3>2. 垂直居中：vertical-align</h3> <font>若想让内容在单元格内垂直居中，使用 <strong>vertical-align: middle;</strong>。</font> <p>注意：该属性在 <code>td 和 th 中有效，但不能直接用于 table 标签。
  • 统一设置所有单元格垂直居中：
    td, th { vertical-align: middle; }
  • 个别单元格设置：
    <td style="vertical-align:middle;"> <h3>3. 使用内联样式或外部CSS</h3> <font>推荐使用外部CSS以保持代码整洁，但测试时可用内联样式快速查看效果。</font> <p>示例：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <pre class="brush:php;toolbar:false;"> &lt;table style=&quot;width:100%;&quot;&gt; &lt;tr&gt; &lt;th style=&quot;text-align:center; vertical-align:middle;&quot;&gt;姓名&lt;/th&gt; &lt;td style=&quot;text-align:center; vertical-align:middle;&quot;&gt;张三&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </pre> <p>更优做法是定义CSS类：</p> <pre class="brush:php;toolbar:false;"> &lt;style&gt; .center-all { text-align: center; vertical-align: middle; } &lt;/style&gt; &lt;td class=&quot;center-all&quot;&gt;内容&lt;/td&gt; </pre> <h3>4. 注意事项</h3> <font>某些浏览器默认对 <code>th（表头）内容加粗并居中，而 td 默认左对齐且不加粗。

    为确保一致性，建议显式设置所有对齐样式，避免依赖默认行为。

    基本上就这些方法，掌握 text-align 和 vertical-align 就能灵活控制表格内容的对齐方式。