[分享]css两个l表格并列居中

今天我们来学习一下如何使用CSS让两个表格并列居中。一般来说，我们可以使用flex布局或者margin:auto来实现这个效果。 首先，让我们看一下flex布局的实现方式： .contai...

今天我们来学习一下如何使用CSS让两个表格并列居中。一般来说，我们可以使用flex布局或者margin:auto来实现这个效果。
首先，让我们看一下flex布局的实现方式：

<div class="container">
  <table class="table1">
    <!-- table1 content -->
  </table>
  <table class="table2">
    <!-- table2 content -->
  </table>
</div> 

.container {
 display: flex;
 justify-content: center;
 align-items: center;
}
.table1,
.table2 {
 width: 50%; /* 或者其他宽度 */
} 

如上所示，我们创建了一个父容器container，使用了flex布局，并设置了justify-content和align-items属性使其水平和垂直居中。接着，我们给每个表格设置了相同的宽度，这样它们就可以并排显示，同时保持均匀。
另外，我们也可以使用margin:auto的方式来实现：

<div class="container">
  <table class="table1">
    <!-- table1 content -->
  </table>
  <table class="table2">
    <!-- table2 content -->
  </table>
</div> 

.container {
 text-align: center;
}
.table1,
.table2 {
 display: inline-block;
 width: 50%; /* 或者其他宽度 */
 vertical-align: top;
 margin: 0 auto;
} 

在这种情况下，我们仍然创建了一个父容器container，不同的是，我们使用了text-align:center使其水平居中。我们也同样给每个表格设置了相同的宽度，并且设置了display:inline-block使它们并排显示。此外，我们还通过设置vertical-align:top和margin:0 auto来让它们在垂直方向居中，并且保持相对均匀的间距。
综上所述，以上是两种让两个表格并列居中的实现方式，希望对大家有所帮助！