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