| Name | id | Salary |
|---|---|---|
| Suranjan | 12412475142 | 32000 |
说明
-
该代码是一个 HTML 文件，它创建一个包含三列的表：Name、id 和 Salary。该表格的“表格容器”类宽度为视口宽度的 70%，并且位于页面中央。表头单元格（姓名、id 和薪水）和表格单元格具有 2 像素实线边框，颜色为 rgb(96, 100, 218)。
立即学习“前端免费学习笔记（深入）”；
该表有一行数据，其中包含姓名“Suranjan”，id 为 12412475142，工资为 32000。
使用grid属性
另一种常用的方法是使用grid属性来居中对齐表格。网格是HTML和CSS的二维元素，我们可以使用它们来创建行和列。如果我们首先将表格声明为网格元素，然后可以使用网格的place-items属性来居中对齐表格。place-items属性实际上是水平和垂直居中对齐网格。
专业的企业网站管理系统，专为中小企业公司开发设计，能让企业轻松管理网站，强大的后台功能，可随意增减栏目，有多种企业常用的栏目模块功能。多级分类，管理文章，图片，文字编辑，留言管理，人才，软件下载等。可让企业会上网就会管理网站，轻松学会使用。 系统功能模块有：单页（如企业简介，联系内容等单页图文）、文章（新闻）列表、产品（图片、订单、规格说明等）、图片、下载、人才招聘、视频、机构组识、全国销售网点图
Example
的中文翻译为：示例
| Name | country | Occupation |
|---|---|---|
| Tom Holland | USA | Software Developer |
说明
这是一个基本的 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
的中文翻译为：示例
| Name | class | Subject |
|---|---|---|
| Suranjan | 12 | Mathematics |
说明
这段代码是一个HTML文件，它创建了一个包含三列的表格：Name（姓名）、id（编号）和Salary（薪水）。该表格具有一个类名为"table-container"，宽度为视口宽度的70%。表头单元格（Name、id和Salary）以及表格单元格都有2px的实线边框，颜色为rgb(96, 100, 218)。表格有一行数据，包含姓名"Suranjan"，编号为12412475142，薪水为32000。
HTML文档的主体具有CSS样式display: flex，使得主体成为一个弹性容器。CSS样式flex-direction: row将弹性容器的项目方向设置为行。CSS样式align-items和justify-content分别在垂直和水平方向上居中项目。
结论
在本文中，我们了解了如何借助 CSS 将表格居中。在本教程中，我们看到了边距属性、网格、Flexbox 等的用法。在讨论的所有方法中，应该使用 Flexbox。这是因为弹性框更方便并且能够响应 UI 元素。
