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

简介

使用 Transform 翻译和位置语法

语法

示例

说明

使用网格属性

使用 Flex Box 属性

将多重嵌套 div 放在中心

结论

首页

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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7513

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。