如何将一个div居中在另一个div中？-html教程-PHP中文网

首页

web前端

html教程

如何将一个div居中在另一个div中？

PHPz

Sep 08, 2023 am 11:13 AM

css居中div居中

如何将一个div居中在另一个div中？

简介

div 的居中对齐是前端开发最重要的方面之一。在本文中，我们将了解使用 HTML 和 CSS 将一个 div 置于另一个 div 中的技术。

在本教程中，我们将有一个父 div，它应具有子 div。我们的任务是将子 div 放置在父 div 的中心。

使用 Transform 翻译和位置语法

这不是一种非常流行的将一个 div 居中对齐到另一个 div 中的方法

语法

left:50%;
top:50%;
Transform: translate(-50%, -50%);

上面的语法执行以下操作 -

CSS 规则“left:50%;”将元素的水平位置设置为其容器左侧的 50%。
规则“top:50%;”将元素的垂直位置设置为距其容器顶部的 50%。
规则“transform：translate(-50%, -50%);”将元素水平移动 -50%，垂直移动 -50%，有效地将元素的中心定位在距离其容器左侧和顶部 50% 的位置。

然而，这并不是将一个 div 置于另一个 div 中心的流行方法。这是因为以下原因 -

这需要额外的五行代码，比其他方法多。
必须定义父级和子级 div 的位置，这可能会给以后设计其他关联 div 带来不便。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container{
      background-color: red;
      width:50vw;
      height:50vh;
      position: relative;
   }
   .child{
      background-color: yellow;
      Width: 25vw;
      Height: 25vh;
      position: absolute;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%);
   }
</style>
</head>
<body>
   <div class="container">
      <div class="child">
      </div>
   </div>
</body>
</html>

说明

在上面的示例中，我们首先声明子级的位置是绝对的，父级的位置是相对的。接下来，我们将子级从父级 div 的顶部和左侧移动了 50%。接下来，我们使用CSS的transform属性使子div居中。
translate(x, y) 函数采用两个值作为参数，其中 x 是水平移动元素的像素数，y 是垂直移动元素的像素数。在本例中，元素将移动其宽度的 -50% 和高度的 -50%，使其垂直和水平居中。

使用网格属性

将 div 居中对齐的更流行的方法是使用 CSS 的 grid 属性；然而，对于这个，首先需要将 div 声明为网格。

语法

place-items: center;

place-items 属性将项目与网格容器水平和垂直对齐。我们只能将该属性与网格容器一起使用。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container{
      background-color: blue;
      width:50vw;
      height:50vh;
      display: grid;
      place-items: center;
   }
   .child{
      background-color: yellow;
      width:25vw;
      height:25vh;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="child">
      </div>
   </div>
</body>
</html>

使用 Flex Box 属性

我们可以使用的另一种方法是CSS的flexbox属性。我们首先需要将父级声明为弹性盒。 Flex box 是 CSS 中广泛使用的元素。它们使用起来非常方便，因为它们是响应式元素，并且程序员通常可以很好地控制 Flexbox 属性。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container{
      background-color: purple;
      width:50vw;
      height:30vh;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
   }
   .child{
      background-color: green;
      width:25vw;
      height:10vh;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="child">
      </div>
   </div>
</body>
</html>

将多重嵌套 div 放在中心

将多个嵌套 div 放入父 div 中也是一项简单的任务。假设有三个div，分别是container，是父div，first-child，是容器的子div；第二个孩子是第一个孩子的孩子。然后我们可以首先使用我们讨论的方法将第一个子元素居中对齐到容器 div 中。接下来，我们可以将第一个孩子作为第二个孩子的父母并应用相同的技术。

作为说明，我们将使用其中一种方法来展示该技术。读者应该尝试使用其他两种方法来执行类似的任务。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container {
      background-color: red;
      width: 50vw;
      height: 30vh;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
   }
   .first-child {
      background-color: green;
      width: 25vw;
      height: 20vh;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
   }
   .second-child {
      background-color: yellow;
      height: 10vh;
      width: 20vw;
   }
</style>
</head>
<body>
<div class="container">
   <div class="first-child">
      <div class="second-child"></div>
   </div>
</div>
</body>
</html>

结论

在本文中，我们了解了如何使用 HTML 和 CSS 将其他 div 内的 div 居中对齐。我们了解了三种不同的 div 居中对齐技术。它们使用position属性、grid属性和flexbox属性。其中，flexbox属性使用最广泛，也最方便。

以上是如何将一个div居中在另一个div中？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

See all articles