CODEWITHSUNDEEP
htmlcsscss-positioncentering
AakLak
AakLak

Reputation: 129

How to stack and center divs?

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

enter image description here

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>

Upvotes: 3

Views: 1054

Answers (4)

WimpyKatana
WimpyKatana

Reputation: 43

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

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371163

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:

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

Upvotes: 3

Lauro Oliveira
Lauro Oliveira

Reputation: 11

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

Upvotes: 1

Johannes
Johannes

Reputation: 67748

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>

Upvotes: 1

Related Questions