Html 如何对齐元素，使它们彼此居中，并与css中的目标相似？

我试图用div元素创建一个目标，但我似乎不知道如何对齐它们，使它们都居中，并且在顶部可以看到最小的div元素。在html文件中，我所有的都是div元素，因为我正在对CSS文件进行所有修改。它看起来应该像这样，但颜色不同

/*box_model.css*/ div{ 高度：50px； 宽度：50px； 背景色：红色； 边界半径：50px； 显示：内联块； 位置：绝对位置； } 分区：第n个类型2{ 高度：100px； 宽度：100px； 背景颜色：橙色； 边界半径：50px； 显示：内联块； 位置：相对位置； } 分区：第n个类型3{ 高度：150像素； 宽度：150px； 背景颜色：黄色； 边界半径：80px； 显示：内联块； 位置：相对位置； } 分区：第n个类型4{ 高度：250px； 宽度：250px； 背景颜色：绿色； 边界半径：150px； 显示：内联块； 位置：相对位置； }

---

我想这就是你想要完成的。这是您的CSS代码：

div.red {
   height: 50px;
   width: 50px;
   background-color: red;
   border-radius: 50px;
   display:flex;
   align-items: center;
   position:absolute;
   z-index: 3;
}
div.orange {
  height: 100px;
  width: 100px;
  background-color: orange;
  border-radius: 50px;
  display:flex;
  align-items: center;
  position:absolute;
  z-index: 2;
}
div.yellow {
  height: 150px;
  width: 150px;
  background-color: yellow;
  border-radius: 80px;
  display:flex;
  align-items: center;
  position: absolute;
  z-index: 1;
}

div.green {
  height: 250px;
  width: 250px;
  background-color: green;
  border-radius: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
}

这是您的HTML代码：

<div class="green">
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="red"></div> 
</div>

---

首先，我给了您案例中的父容器body一个flex显示。接下来，我让所有的孩子都绝对定位，这样他们就可以使用z-index互相堆叠。最后，添加垂直变换以考虑其自身的高度，以便元素将真正定位在屏幕的中心

注：我将所有边界半径线压缩成一条线，希望能让你的生活更轻松

身体{ 显示器：flex； 对齐项目：居中； 证明内容：中心； } 正文>div{ 位置：绝对位置； 转化：translateY-50%； 最高：50%； 边界半径：50%； } div{ 高度：50px； 宽度：50px； 背景色：红色； 显示：内联块； } 分区：第n个类型1{ z指数：4； } 分区：第n个类型2{ 高度：100px； 宽度：100px； 背景颜色：橙色； z指数：3； } 分区：第n个类型3{ 高度：150像素； 宽度：150px； 背景颜色：黄色； z指数：2； } 分区：第n个类型4{ 高度：200px； 宽度：200px； 背景颜色：绿色； z指数：1； } a1{ 显示器：flex； 高度：250px； 宽度：250px； 背景颜色：绿色； 边界半径：125px； z指数：5； 证明内容：中心； 对齐项目：居中； } a2{ 显示器：flex； 高度：200px； 宽度：200px； 背景颜色：黄色； 边界半径：100px； z指数：10； 证明内容：中心； 对齐项目：居中； } a3{ 显示器：flex； 高度：150像素； 宽度：150px； 背景颜色：橙色； 边界半径：75px； z指数：15； 证明内容：中心； 对齐项目：居中； } a4{ 显示器：flex； 高度：100px； 宽度：100px； 背景色：红色； 边界半径：50px； z指数：20； 证明内容：中心； 对齐项目：居中； } 使用具有z索引的flexbox

---

在这里，您可能需要使用一些技巧

首先，允许您相对于其父布局定位对象

请记住，绝对定位元素是基于具有绝对或相对定位的下一个父元素定位的。也就是说，如果直接父对象具有position:static，则出于绝对定位的目的，将忽略该父对象。这就是为什么在我的示例中，我给出了container div position:relative，以便应用绝对定位

其次，该函数允许您进行派生计算——在本例中，为了使物体完全居中，我们将左、右属性计算为父对象宽度的50%，减去1/2*我们希望该物体的宽度

第三，z-index属性允许我们控制哪个元素显示在顶部

我很快就修改了你所做的，这是我得到的

/*box_model.css*/ .集装箱{ 位置：相对位置； 高度：250px； 宽度：250px； } .container>.target{ 位置：绝对位置； } .目标：第n个类型1{ 高度：50px； 宽度：50px； 背景色：红色； 边界半径：50px； z指数：4； 左：calc50%-25px； 顶部：calc50%-25px； } .目标：第n种类型2{ 高度：100px； 宽度：100px； 背景颜色：橙色； 边界半径：50px； z指数：3； 左：calc50%-50px； 顶部：calc50%-50px； } .目标：第n种类型3{ 高度：150像素； 宽度：150px； 背景颜色：黄色； 边界半径：80px； z指数：2； 左：calc50%-75px； 顶部：calc50%-75px； } .目标：第n种类型4{ 高度：250px； 宽度：250px； 背景颜色：绿色； 边界半径：150px； z指数：1； 左：calc50%-125px； 顶部：calc50%-125px； } 我希望这有帮助

.包装纸{ 宽度：500px； 高度：500px； 边框：1px实心； 位置：相对位置； 利润率：20px； } 包 每个分区：N-child1{ 高度：300px； 宽度：300px； 背景色：红色； 边界半径：150px； 位置：绝对位置； 顶部：calc50%-150px； 左：calc50%-150px； } .wrapper div:n-child2{ 高度：200px； 宽度：200px； 背景色：白色； 边界半径：100px； 位置：绝对位置； 顶部：calc50%-100px； 左：calc50%-100px； } .wrapper div:n-child3{ 高度：100px； 宽度：100px； 背景色：红色； 边界半径：100px； 位置：绝对位置； 顶部：calc50%-50px； 左：calc50%-50px； }

---

如果你有一张你想要创造的图片，这会很有帮助。