简介
在本实验中，我们将探索使用 CSS 进行网格居中的概念。你将学习如何使用 grid 布局在父元素内水平和垂直居中一个子元素。在本实验结束时，你将对如何使用 justify-content 和 align-items 属性来创建完美居中的布局有深入的理解。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 100%。获得了学习者 100% 的好评率。
网格居中
虚拟机中已经提供了 index.html 和 style.css。
要在父元素内将子元素水平和垂直居中，请执行以下步骤：
- 使用
display: grid创建网格布局。 - 使用
justify-content: center将子元素水平居中。 - 使用
align-items: center将子元素垂直居中。
以下是一个示例 HTML 结构：
<div class="parent">
<div class="child">Centered content.</div>
</div>
以及相应的 CSS：
.parent {
display: grid;
justify-content: center;
align-items: center;
height: 100px;
}
请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。
总结
恭喜你！你已经完成了网格居中实验。你可以在 LabEx 中练习更多实验来提升你的技能。