如何堆叠和居中 div？答案

【问题标题】：How to stack and center divs?如何堆叠和居中 div？
【发布时间】：2018-03-13 02:09:28
【问题描述】：

我正在尝试堆叠 + 垂直和水平对齐三个蓝色圆圈 div。最终结果应如下所示：

我已经尝试添加 margin: 0 auto;, text-align: center;

谢谢

.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;
}

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

【问题讨论】：

标签： html css css-position centering

【解决方案1】：

添加这个：

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

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

.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%);
}

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

【讨论】：

【解决方案2】：

你可以试试这个：

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;
    }

【讨论】：

【解决方案3】：

将容器设置为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>

【讨论】：

【解决方案4】：

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

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

尝试使用

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

【讨论】：