垂直和水平居中元素

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") subgraph Lab Skills css/selectors -.-> lab-35250{{"`垂直和水平居中元素`"}} css/colors -.-> lab-35250{{"`垂直和水平居中元素`"}} css/text_styling -.-> lab-35250{{"`垂直和水平居中元素`"}} css/borders -.-> lab-35250{{"`垂直和水平居中元素`"}} css/width_and_height -.-> lab-35250{{"`垂直和水平居中元素`"}} css/positioning -.-> lab-35250{{"`垂直和水平居中元素`"}} css/transformations -.-> lab-35250{{"`垂直和水平居中元素`"}} end

使用变换进行居中

虚拟机中已经提供了 index.htmlstyle.css

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

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

以下是一个示例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中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程