使用CSS和大多数相对属性，将多个HTML元素相互悬停在父元素的中心？

Question

I need this markup to then use in an animation. This animation should use relative values almost anywhere to scale without breaking and look similar anywhere. display: flex and its aligns and justifies work wrong in my situation, so I went here to ask.

This is my markup:

 .a-parent { height: 100px; width: 100px; border-radius: 50%; background-color: #f0f0f0; } .a-child { height: 10%; width: 10%; background-color: #0099ff; border-radius: 50%; } 

 <div class="a-parent"> <div class="a-child"></div> <div class="a-child"></div> <div class="a-child"></div> <div class="a-child"></div> <div class="a-child"></div> </div> 

How could I center all 5 a-child elements over each other to make it look like this?

EDIT: fixed my html, sorry.

Answer 1

Use position relative on the .a-parent and absolute on a-child and align children horizontally and vertically center in the parent.

 .a-parent { height: 100px; width: 100px; border-radius: 50%; position: relative; background-color: #aaaaaa; } .a-child { height: 10%; width: 10%; background-color: #0099ff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

 <div class="a-parent"> <div class="a-child"></div> <div class="a-child"></div> <div class="a-child"></div> <div class="a-child"></div> <div class="a-child"></div> </div>