css 如何把表格居中显示

在网站制作中，表格是常用的元素之一。但是在表格的显示方面，很多人会遇到表格不居中的问题。那么，如何使用 CSS 把表格居中呢？下面将详细介绍几种方法。

/* 方法一：margin: 0 auto;
 */table {
      margin: 0 auto;
}
    /* 方法二：text-align: center;
 */table {
      text-align: center;
}
    /* 方法三：display: flex;
     和 justify-content: center;
 */.wrapper {
      display: flex;
      justify-content: center;
}
    

以上三种方法都能实现表格居中的效果，下面将分别进行介绍。

方法一：margin: 0 auto;

这是最简单的方法，只需要在表格所在的容器中添加一个 margin 属性即可。具体代码如下：

/* HTML 代码 */div class="wrapper">
      table>
        ...  /table>
    /div>
/* CSS 代码 */.wrapper {
      margin: 0 auto;
}
    

需要注意的是，这种方法只能在表格容器已经定义宽度的情况下才能使用，否则表格是不会居中的。

方法二：text-align: center;

这种方法比较适用于表格容器为行内元素的情况下。只需要在表格容器中添加 text-align:center; 即可实现表格居中显示。代码如下：

/* HTML 代码 */div class="wrapper" style="text-align:center;
    ">
      table>
        ...  /table>
    /div>
    

需要注意的是，如果表格容器为块级元素，那么会导致文字也一起居中，所以需要针对文字做一些处理。

方法三：display: flex; 和 justify-content: center;

这种方法需要在表格容器上定义 display:flex; ，然后在 justify-content 属性中设置 center 即可。代码如下：

/* HTML 代码 */div class="wrapper">
      table>
        ...  /table>
    /div>
/* CSS 代码 */.wrapper {
      display: flex;
      justify-content: center;
}
    

需要注意的是，这种方法只能用于现代浏览器，如果在老的浏览器中使用会出现兼容性问题。

综上所述，以上三种方法都能实现表格居中的效果，具体应该根据实际情况来选择合适的方法。希望对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！