将表格水平居中于div中

Question

我正在尝试将一个表放在div中，但表可以有不同的长度。代码看起来像这样：

<div>
     <table>
     <tr> .... </tr>
     </table>
</div>

div元素当然是display:block，当然占用了页面上的整个水平空间，但是我无法弄清楚如何将填充设置为自动并且只是将表放在{ {1}}

有人可以帮我吗？

Answer 1

如果table有明确的宽度，您只需使用margin: 0 auto将其居中。

table { margin: 0 auto; }

或者，如果您想使用flexbox，请将父元素的display设置为flex，并使用justify-content: center进行水平居中。

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

Answer 2

表是块级元素。您可以设置表格的width并设置margin: auto

如果width发生变化，您可以使用width和min/max-width的百分比或组合。