在 html 中，表格是非常常见的元素之一，尤其是在展示数据、排版布局的场景中。如果不加任何样式的话，表格将会默认以左对齐的方式进行排版，这时需要通过样式来使表格居中。
以下是三种方法，帮助你实现让表格在页面上水平垂直居中：
方法一：使用 CSS 居中表格
这是最常见也是最推荐的一种方法，使用 CSS 的 text-align 属性让表格内容居中显示。
代码如下：
<style>
table {
margin: 0 auto;
text-align: center;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>北京</td>
</tr>
<tr>
<td>小红</td>
<td>17</td>
<td>上海</td>
</tr>
</table>通过 CSS 的 text-align 属性设置表格文字内容居中。其中, margin: 0 auto 将表格设置为水平居中。
立即学习“前端免费学习笔记（深入）”；
方法二：使用 HTML 属性
如果你不想用 CSS，那么也可以在 HTML 中使用属性来实现表格水平居中：
代码如下：
<table align="center">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>北京</td>
</tr>
<tr>
<td>小红</td>
<td>17</td>
<td>上海</td>
</tr>
</table>通过在 table 标签中添加 align="center" 属性来实现表格居中。
方法三：使用弹性盒子
CSS 中的 flexbox 是一种非常有用的排版方式，它可以方便地实现水平和垂直方向的居中。
代码如下：
<style>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wrapper table{
width: 200px;
}
</style>
<div class="wrapper">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>北京</td>
</tr>
<tr>
<td>小红</td>
<td>17</td>
<td>上海</td>
</tr>
</table>
</div>通过在 div 元素中设置 display: flex;、justify-content: center; 和 align-items: center; 来将表格居中，其中，height: 100vh; 让容器元素占据整个视口高度。
以上就是三种实现表格水平居中的方法。不过需要注意的是，在 HTML 中使用属性来设置样式不如使用 CSS 更易于维护和管理。在实际开发中，建议尽可能使用 CSS 来控制表格的样式，以达到更好的可读性和可维护性。
