css table在div中居中

在网页开发过程中，经常会用到表格来展示数据，而CSS中的table样式可以让表格更加美观，同时也更灵活，可以根据需求自定义表格的样式。但有时候我们希望把一个表格放到一个div中，并且让它居中，这样既可以让整个页面更加美观，也可以提高用户的体验。下面我们将介绍如何实现CSS table在div中居中。

首先，我们需要准备一个包含表格的div，并设置它的宽度和高度。如下代码：

<div class="container">
    <table>
        //表格内容
    </table>
</div>

.container {
    width: 60%;
    height: 400px;
}

接下来，我们需要在CSS样式文件中给table和tr设置样式。如下代码：

table {
    display: table; 
    margin: 0 auto; 
}
tr {
    display: table-row; 
}

通过上述代码，我们可以让CSS table在div中居中。其中，table的display属性设置为table，这可以让我们自定义表格样式；margin属性设置为0 auto，可以将表格水平居中；tr的display属性设置为table-row，则可以让每一行都在一行内显示。

最后，我们还需要设置table的宽度，这样，在缩放浏览器时，表格也可以随之缩放。可以尝试修改以下代码。

table {
    display: table; 
    margin: 0 auto; 
    width: 100%;
}

通过以上代码，我们可以让CSS table在div中居中，并且随着浏览器窗口大小的变化而自适应。这样，我们就实现了CSS table在div中居中的效果。