Center children and z-index

Question

How can I center the children horizontally in the page and stack the circles under .centered?
https://sololearn.com/compiler-playground/WEgURf0EFPaW/?ref=app

Answer 1

Do you mean like this?
I've put comments in the CSS tab.

https://sololearn.com/compiler-playground/W5bJrv0zYXTJ/?ref=app

Answer 2

don't nest the 3 circles in the .centered div

Answer 3

If I understand your question correctly, you would put the children in a div and centre that. What do you mean by stack?

Answer 4

Sorry for not being clear, how to make the elements within .centered display horizontally centered within the page?

With stack, I'm trying to arrange the circle elements to look like they're under the .centered element with Z-index property.
https://sololearn.com/compiler-playground/WnfPs6Ey5JAG/?ref=app
A little like this

Answer 5

Elena are you trying to make the centers of the different size circles line up?
If so, you want to apply transform:translate(); to each of the smaller circles.
For translate values, use half of the difference between largest radius and current radius.

In your last example, blue circle had radius 100, red had 50.
Half of difference is (100-50)/2 = 25.
So .red would include
transform:translate(25px, 25px);

Answer 6

Thanks!! The advises helped