How to stack and center divs?

Question

I'm trying to stack + vertically & horizontally align the three blue circle divs. End result should look something like this:

I've tried adding margin: 0 auto;, text-align: center;

Thank you

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

Answer 1

Set the container to position: relative. This establishes the bounding box for the absolutely positioned descendants (MDN).

Then center each circle element using the CSS offset properties left and top.

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

A complete explanation of this centering method is available here:

• 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 2

Add this:

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

This first moves each element (which already have position: absolute) to the right and down by 50% of the containers width and height, then it moves each element back left and up by 50% of its own width and height, which results in horizontal and vertical centering in relation to the parent element.

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

Answer 3

You can try this:

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

hey maybe this one will help u, i just try some stuff with codepen

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

try use

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