css 中设置表格居中 |css3时钟动画效果大全

居中设置可以通过CSS中的text-align属性完成，直接将其设置为center即可。例如：

table {
text-align: center;
}

然而，这并不是最佳的居中表格的实现方法，因为仅仅设置text-align仅仅使表格中的文本内容居中，而表格本身依旧是左对齐的。为了完整地实现表格居中的设计，大家需要使用 margin 属性。

PR值是指盒子的左右外边距的值的总和。如果将其设置为”auto”，则会自动将左右外边距设置为相等，从而实现表格的居中。例如：

table {
margin: auto;
}

上述代码块将使表格水平居中于父容器中。要垂直和水平同时居中，需要针对一个父级容器所采取的方法是用 display: flex 将容器变为 flex 容器,并设置justify-content 和 align-items属性为center,如下所示：

.container {
display: flex;
justify-content: center;
align-items: center;
}
table {
margin: auto;
}

这样设置之后，当表格内部数据不足时，仍能够保持居中的效果，同时适用于不同的父级容器。此外，使用 flex 也可以在移动设备上保持表格的响应性。