学习使用表格显示实现垂直和水平居中

简介

在本实验中，我们将学习如何使用 display: table 将子元素在其父元素内居中。通过使用此技术，我们可以轻松实现垂直和水平居中，而无需借助复杂的定位或 JavaScript。在为网站和应用程序设计响应式布局时，这是一项很有用的技能。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

使用表格显示实现元素居中

虚拟机中已经提供了 index.html 和 style.css。

要在父元素内将子元素垂直和水平居中，请执行以下步骤：

添加一个具有固定 高度 和 宽度 的容器元素。

<div class="container"></div>

在容器元素内添加子元素，并为其赋予 .center 类。

  <div class="center"><span>Centered content</span></div>
</div>

在 CSS 中，对容器元素应用以下样式：

将 高度 和 宽度 设置为所需的固定值。
添加边框（可选）。

.container {
  border: 1px solid #9c27b0;
  height: 250px;
  width: 250px;
}

在 CSS 中，对子元素应用以下样式：

使用 display: table 使 .center 元素表现得像一个 <table> 元素。
将 高度 和 宽度 设置为 100%，使元素填充其父元素内的可用空间。
在子元素上使用 display: table-cell 使其表现得像一个 <td> 元素。
在子元素上使用 text-align: center 和 vertical-align: middle 使其在水平和垂直方向上居中。

.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

请点击右下角的“Go Live”在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了“使用表格显示实现元素居中”实验。你可以在 LabEx 中练习更多实验来提升你的技能。