简介
在本实验中，我们将探索 CSS 中弹性盒布局（flexbox）的居中概念。你将学习如何使用弹性盒布局在父元素内水平和垂直居中子元素。在本实验结束时，你将能够使用弹性盒布局居中技术创建响应式且视觉上吸引人的布局。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 94%。获得了学习者 100% 的好评率。
弹性盒布局居中
虚拟机中已经提供了 index.html 和 style.css。
要使用弹性盒布局在父元素内水平和垂直居中子元素，请执行以下步骤：
- 通过将父元素的
display属性设置为flex来创建弹性盒布局。 - 使用
justify-content属性并将其值设置为center来水平居中子元素。 - 使用
align-items属性并将其值设置为center来垂直居中子元素。 - 在父元素内添加子元素。
以下是一个示例代码片段：
<div class="flexbox-centering">
<div>Centered content.</div>
</div>.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。
总结
恭喜你！你已经完成了弹性盒布局居中实验。你可以在 LabEx 中练习更多实验来提升你的技能。