f5d188ed2c074f8b944552db028f98a1标签用于在html中创建传统的组件称为表格。在设计网页时，了解如何改善设计的整体可视化是必不可少的。将表格居中对齐是其中一个重要方面。本教程将教我们如何使用css将表格居中。
使用margin-left和margin-right属性这是 html 和 css 中居中对齐表格元素的流行方法。 css 的 margin-left 和 margin-right 属性分别用于设置元素的左边距和右边距。边距在元素边框之外创建空间，有效地将元素推离页面上的其他元素。
属性的值可以使用长度值（例如，px、em、cm）、百分比或预定义的值auto、inherit或initial进行设置。
example的中文翻译为：示例<!doctype html><html lang=en> <head> <style> .table-container, th, td { border: 2px solid rgb(96, 100, 218); } .table-container { width: 70vw; margin-left: auto; margin-right: auto; } </style> </head> <body> <table class=table-container> <th>name</th> <th>id</th> <th>salary</th> <tr> <td>suranjan</td> <td>12475142</td> <td>32000</td> </tr> </table> </body></html>
说明该代码是一个 html 文件，它创建一个包含三列的表：name、id 和 salary。该表格的“表格容器”类宽度为视口宽度的 70%，并且位于页面中央。表头单元格（姓名、id 和薪水）和表格单元格具有 2 像素实线边框，颜色为 rgb(96, 100, 218)。
该表有一行数据，其中包含姓名“suranjan”，id 为 12475142，工资为 32000。
使用grid属性另一种常用的方法是使用grid属性来居中对齐表格。网格是html和css的二维元素，我们可以使用它们来创建行和列。如果我们首先将表格声明为网格元素，然后可以使用网格的place-items属性来居中对齐表格。place-items属性实际上是水平和垂直居中对齐网格。
example的中文翻译为：示例<!doctype html><html lang=en> <head> <style> .table-container, th, td { border: 2px solid rgb(96, 100, 218); } .table-container { width: 70vw; } body{ display: grid; place-items: center; } </style> </head> <body> <table class=table-container> <th>name</th> <th>country</th> <th>occupation</th> <tr> <td>tom holland</td> <td>usa</td> <td>software developer</td> </tr> </table> </body></html>
说明这是一个基本的 html 代码，用于创建一个包含三列的表格 - 姓名、国家/地区和职业。该表有一行数据，其中包含姓名 (tom holland)、国家/地区（美国）和职业（软件开发人员）的值。
html 的 head 部分中定义的 css 样式将表格的边框、表格单元格（th、td）和表格本身（class=table-container）设置为 2px 实线rgb 颜色 (96, 100, 218)。表格的宽度设置为 70vw（视口宽度的 70%）。正文部分设置为显示为网格并将项目置于页面的中心。
使用 flexbox 属性另一种非常流行的方法是使用css的flexbox属性来居中对齐表格。 flexbox 是 html 和 css 的响应式元素。 flexbox具有某些属性，例如alien-items、justify-content等，我们可以使用它们来使表格居中。程序员通常发现此方法是使表格居中的最方便的方法。
example的中文翻译为：示例<!doctype html><html lang=en> <head> <style> .table-container, th, td { border: 2px solid rgb(96, 100, 218); } .table-container { width: 70vw; } body{ display: flex; flex-direction: row; align-items: center; justify-content: center; } </style> </head> <body> <table class=table-container> <th>name</th> <th>class</th> <th>subject</th> <tr> <td>suranjan</td> <td>12</td> <td>mathematics</td> </tr> </table> </body></html>
说明这段代码是一个html文件，它创建了一个包含三列的表格：name（姓名）、id（编号）和salary（薪水）。该表格具有一个类名为table-container，宽度为视口宽度的70%。表头单元格（name、id和salary）以及表格单元格都有2px的实线边框，颜色为rgb(96, 100, 218)。表格有一行数据，包含姓名suranjan，编号为12475142，薪水为32000。
html文档的主体具有css样式display: flex，使得主体成为一个弹性容器。css样式flex-direction: row将弹性容器的项目方向设置为行。css样式align-items和justify-content分别在垂直和水平方向上居中项目。
结论在本文中，我们了解了如何借助 css 将表格居中。在本教程中，我们看到了边距属性、网格、flexbox 等的用法。在讨论的所有方法中，应该使用 flexbox。这是因为弹性框更方便并且能够响应 ui 元素。
以上就是如何用 css 使表格居中？的详细内容。