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

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

PHPz

发布： 2023-09-08 11:13:02

转载

1741 人浏览过

如何将一个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>

登录后复制