使用CSS和大多數相對屬性，將多個HTML元素相互懸停在父元素的中心？

Question

我需要此標記才能在動畫中使用。 該動畫應該在幾乎任何地方都可以使用相對值來縮放而不破裂，並且在任何地方看起來都相似。 display: flex及其對齊方式並證明在我的情況下工作有誤，因此我去這里詢問。

這是我的標記：

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

我如何才能使所有5 a-child元素相互居中以使其看起來像這樣？

編輯：修復我的html，對不起。

Answer 1

在.a-parent上使用相對位置，在a-child上a-child絕對位置，並將孩子在父級中水平和垂直居中對齊。

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