用 CSS 变换掌握垂直和水平居中

简介

在本实验中，我们将学习如何使用 CSS 变换在父元素中垂直和水平居中子元素。我们将通过使用相对定位和绝对定位，以及 transform 属性及其 translate 函数来实现这一点。本实验将为你提供一种在网页上定位内容的实用技术。

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

使用变换进行居中

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

要使用 CSS 变换在父元素中垂直和水平居中子元素，请执行以下步骤：

将父元素的 position 属性设置为 relative，子元素的 position 属性设置为 absolute，以便相对于其父元素进行定位。
使用 left: 50% 和 top: 50% 将子元素从父元素的左边缘和上边缘偏移 50%。
使用 transform: translate(-50%, -50%) 来抵消其位置，使其在垂直和水平方向上都居中。
请注意，父元素固定的 height 和 width 仅用于演示目的。

以下是一个示例 HTML 代码：

<div class="parent">
  <div class="child">Centered content</div>
</div>

以及相应的 CSS 代码：

.parent {
  border: 1px solid #9c27b0;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

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

总结

恭喜你！你已经完成了“使用变换进行居中”实验。你可以在 LabEx 中练习更多实验来提升你的技能。

垂直和水平居中元素

简介

使用变换进行居中

总结