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

CSSCSSBeginner
立即练习

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

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

简介

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


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/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) 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/display_property("`Display Property`") css/IntermediateStylingGroup -.-> css/lists_and_tables("`Lists and Tables`") css/CSSPreprocessorsGroup -.-> css/nesting("`Nesting`") subgraph Lab Skills css/selectors -.-> lab-35191{{"`使用表格显示实现元素居中`"}} css/colors -.-> lab-35191{{"`使用表格显示实现元素居中`"}} css/text_styling -.-> lab-35191{{"`使用表格显示实现元素居中`"}} css/borders -.-> lab-35191{{"`使用表格显示实现元素居中`"}} css/width_and_height -.-> lab-35191{{"`使用表格显示实现元素居中`"}} css/display_property -.-> lab-35191{{"`使用表格显示实现元素居中`"}} css/lists_and_tables -.-> lab-35191{{"`使用表格显示实现元素居中`"}} css/nesting -.-> lab-35191{{"`使用表格显示实现元素居中`"}} end

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

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

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

  1. 添加一个具有固定 高度宽度 的容器元素。
<div class="container"></div>
  1. 在容器元素内添加子元素,并为其赋予 .center 类。
  <div class="center"><span>Centered content</span></div>
</div>
  1. 在 CSS 中,对容器元素应用以下样式:
  • 高度宽度 设置为所需的固定值。
  • 添加边框(可选)。
.container {
  border: 1px solid #9c27b0;
  height: 250px;
  width: 250px;
}
  1. 在 CSS 中,对 子元素应用以下样式:
  • 使用 display: table 使 .center 元素表现得像一个 <table> 元素。
  • 高度宽度 设置为 100%,使元素填充其父元素内的可用空间。
  • 在子元素上使用 display: table-cell 使其表现得像一个 <td> 元素。
  • 在子元素上使用 text-align: centervertical-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 中练习更多实验来提升你的技能。

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