如何使用 CSS 将表格居中

当我们需要将表格在页面中居中显示时，可以通过 CSS 的样式设置来实现。以下是一些常用的方法：

方法一：使用 margin 属性

使用 margin 属性来调整元素的外边距，从而实现居中效果。我们可以将表格的 margin-left 和 margin-right 设置为 auto，它会根据用户所用的浏览器窗口大小自动调整宽度并使元素居中。

table {
  margin-left: auto;
  margin-right: auto;
}

方法二：使用 text-align 属性

我们也可以通过将表格所在区域的 text-align 属性设置为 center，来实现表格居中的效果。

.wrapper {
  text-align: center;
}

table {
  display: inline-block;
  text-align: left;
}

注：要让表格左对齐，需要将表格的 text-align 设置为 left。

方法三：使用 flexbox 弹性盒子布局

我们也可以使用 flexbox 弹性盒子布局来实现表格居中。将表格所在的容器的 display 属性设置为 flex，然后将 justify-content 属性设置为 center，即可将表格水平居中。

.container {
  display: flex;
  justify-content: center;
}

以上三种方法都可以实现表格的居中效果。在实际使用时，我们可以根据网站的布局情况来选择使用哪种方法来实现表格的居中。