Question

我试图垂直叠加+ amp;水平对齐三个蓝色圆圈div。最终结果应如下所示：

我尝试过添加保证金：0 auto;，text-align：center;

谢谢

＆＃13;

.outer {
  padding: 5px;
}

.circle1 {
  width: 84px;
  height: 84px;
  border-radius: 42px;
  background-color: #1393ff;
  position: absolute;
}

.circle2 {
  width: 96px;
  height: 96px;
  border-radius: 48px;
  background-color: #1393ff;
  position: absolute;
  opacity: 0.5;
}

.circle3 {
  width: 110px;
  height: 110px;
  border-radius: 55px;
  background-color: #1393ff;
  position: absolute;
  opacity: 0.2;
}

＆＃13;

<div class="outer">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</div>

＆＃13;

Answer 1

添加：

.circle1, .circle2, .circle3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

首先将每个元素（已经有position: absolute）向右移动并向下移动容器宽度和高度的50％，然后将每个元素向左移动并向上移动其自身宽度的50％ height，导致相对于父元素的水平和垂直居中。

＆＃13;

.outer {
  padding: 5px;
}

.circle1 {
  width: 84px;
  height: 84px;
  border-radius: 42px;
  background-color: #1393ff;
  position: absolute;
}

.circle2 {
  width: 96px;
  height: 96px;
  border-radius: 48px;
  background-color: #1393ff;
  position: absolute;
  opacity: 0.5;
}

.circle3 {
  width: 110px;
  height: 110px;
  border-radius: 55px;
  background-color: #1393ff;
  position: absolute;
  opacity: 0.2;
}

.circle1,
.circle2,
.circle3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="outer">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</div>

＆＃13;

Answer 2

将容器设置为position: relative。这为绝对定位的后代（MDN）建立了边界框。

然后使用CSS偏移属性left和top对每个圆元素进行居中。

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

此处有一个完整的居中方法说明：

Element will not stay centered, especially when re-sizing screen

.outer {
  padding: 5px;
  position: relative;
  width: 150px;
  height: 150px;
  border: 1px dashed red;
}

.circle1 {
  width: 84px;
  height: 84px;
  border-radius: 42px;
  background-color: #1393ff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.circle2 {
  width: 96px;
  height: 96px;
  border-radius: 48px;
  background-color: #1393ff;
  position: absolute;
  opacity: 0.5;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.circle3 {
  width: 110px;
  height: 110px;
  border-radius: 55px;
  background-color: #1393ff;
  position: absolute;
  opacity: 0.2;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);  
}

<div class="outer">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</div>

Answer 3

你可以试试这个：

HTML：

    <div class="outer">
      <div class="circle1">
        <div class="circle2">
         <div class="circle3"></div>
        </div>  
      </div>
    </div>

的CSS：

    circle1,circle2,circle3{
       display: table-cell;
       text-align: center;
       vertical-align: middle;
    }

Answer 4

嘿，也许这个会帮助你，我只是用codepen尝试一些东西

https://codepen.io/JeansBolong/full/WZEzzo/

尝试使用

.outer > * {
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     position: absolute;
}

如何堆叠和居中div？

4 个答案: