html - 使用 CSS 和 moSTLy 相关属性将多个 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-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>