资料库 – 中文知识库

掌握CSS技巧，轻松实现表格居中显示

—

by

admin
in

在网页设计中，表格居中显示是一个常见的需求。通过使用CSS，我们可以轻松地将表格及其内容居中显示在父容器中。以下是一些实现表格居中的方法，包括水平和垂直居中。
水平居中
使用
margin: 0 auto;
这是最简单的一种方法，适用于水平居中单个表格。




Table Horizontal Center


数据1 数据2
数据3 数据4



使用
display: flex;
这种方法适用于父容器使用了
display: flex;
。




Table Horizontal Center with Flex


数据1 数据2
数据3 数据4



垂直居中
使用
display: flex;
和
align-items: center;
这种方法可以将表格及其内容垂直居中。




Table Vertical Center


数据1 数据2
数据3 数据4



使用
position: absolute;
和
transform: translate(-50%, -50%);
这种方法适用于父容器有固定高度的情况。




Table Vertical Center with Position


数据1 数据2
数据3 数据4



以上是几种实现表格居中的方法，您可以根据实际需求选择合适的方法。