Comment empiler et centrer les divs?

Question

J'essaie d'empiler verticalement + & aligner horizontalement les trois divs de cercle bleu. Le résultat final devrait ressembler à ceci:

J'ai essayé d'ajouter margin: 0 auto ;, text-align: center;

Merci

.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

Ajouter ceci:

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

Ce premier se déplace chaque élément (qui ont déjà position: absolute) à droite et en baisse de 50% du largeur et hauteur des conteneurs, puis déplace chaque élément vers l'arrière de 50% de sa largeur et de sa hauteur, ce qui centrage horizontal et vertical par rapport à l'élément parent.

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

Mettre le récipient à position: relative. Cela établit la zone de délimitation pour les descendants positionnés en absolu (MDN).

Ensuite, centrez chaque élément de cercle en utilisant les propriétés de décalage CSS left et top.

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

Une explication complète de cette méthode de centrage est disponible ici:

• 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

Vous pouvez essayer ceci:

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 peut-être celui-ci va aider u, j'essaie juste des choses avec codepen

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

essayez d'utiliser

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