[分享]css中如何整张表居中

使用CSS进行居中对齐是在设计网页时常常需要用到的技巧。将整张表格居中对齐除了美观，更可使网页排版整齐有序。下面我们来看如何通过CSS实现将整张表格居中对齐。首先，我们可以使用以下代码来实现这个效果：...

使用CSS进行居中对齐是在设计网页时常常需要用到的技巧。将整张表格居中对齐除了美观，更可使网页排版整齐有序。下面我们来看如何通过CSS实现将整张表格居中对齐。
首先，我们可以使用以下代码来实现这个效果：

table {
  margin: 0 auto;
} 

这段代码的意思是将table元素的左右边距设置为auto，这样就可使该元素水平居中对齐。这适用于所有具有固定宽度的元素，包括表格。
但是，若是表格宽度超出了容器元素的宽度，那么会发现表格并没有居中对齐，而是向左偏移。这是由于浏览器默认将表格的宽度设置为100%。为了解决这个问题，我们可以设置表格的宽度。

table {
  width: 80%;
  margin: 0 auto;
} 

其次是使用text-align属性实现表格内文本的居中对齐。这个属性值可以设置为left、right或center。但是，这种方式只对表格内文本有效，对于表格边框并没有作用。
最后，我们需要注意的是，当容器元素的宽度小于表格宽度时，我们需要设置表格的溢出属性为自动以实现显示滚动条的效果。

table {
  width: 80%;
  margin: 0 auto;
  overflow: auto;
} 

在实际运用中，我们还可以运用定位等其他属性来实现表格居中。总之，通过CSS实现整张表格的居中对齐，可使我们的网页看起来更加整洁美观。