html - 如何将一个绝对元素置于另一个绝对元素的中心，可用于旋转和动画目的

Question

为了清楚起见，我有两个正方形，它们都具有 position: absolute 并且位于另一个具有相对位置的 div 中。

这更多地与 UI 设计相关，而不是关于将两个 div 彼此居中并用于 web，它更像是一个 UI 事物或弹出窗口或类似的动画事物。

这意味着我可能在某处有一个比 box1 大的圆。然后我使用一个不可见的盒子，它有一个包含 box2 作为 child 的相对位置

两个正方形的大小不同。

问题的新例子在这里: https://jsfiddle.net/mgznef98/2/

红框不允许改变位置边界不知何故必须居中。我将它放在一个 box2 容器中以支持它，因为如果我要编辑它，box1 可能是另一种形状而不是一个简单的盒子

“some-container”只是会在网站上移动并承载所有“盒子”的“东西”，因此它不能与 table-cell 一起使用。

如果你想看看这个 Rotate objects around circle using CSS? 在此页面上，他们围绕另一个元素的中心旋转元素，但它们不在中心内。我想把一些东西放在中心。例如，一个正方形的边框可以旋转。

我设法以某种方式将蓝色方 block 置于红色方 block 的中心。我什至不确定它是否完全居中。 https://jsfiddle.net/mgznef98之前关于这个，但对于边界的，我真的不知道。

我的问题是，我认为它背后有一些数学原理。我认为必须有一些公式来找出在“top”和“left”中放什么，这样当红色框改变宽度和高度时，我可以将蓝色“边框”框恰好放在红色框内的中心。

我所知道的是它会根据 box2 及其容器和 box1 的大小而变化。

示例:

让我们再说一遍，我有两个盒子，但其中一个是不可见的，在本例中是 box2 的容器。 box2 不是一个盒子，而是一个旋转的“东西”。 box1 不是一个盒子，而是一个元素，一个形状或有一个中心的东西。 box2 有一个边框而不是背景颜色，并且该边框必须围绕元素的中心旋转。问题是 box2 比 box1 大。

.some-container {
  top: 30px;
  left: 30px;
  position: relative;
}

.box1 {
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
}

.box2-container {
  position: relative;
  height: 20px;
  width: 20px;
}

.box2 {
  width: 40px;
  height: 40px;
  border: 2px solid blue;
  position: absolute;
  top: -50%; /* These values have to be changed when I want to recenter a new width and height from box1 */
  left: -50%;
  border-radius: 50%; 
  border-color: blue blue blue transparent;
  border-width: 2px;
  animation: box2-rotation 3s linear infinite;
}

@keyframes box2-rotation {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

<div class=some-container>
  <div class=box1>
  </div>
  <div class=box2-container>
    <div class=box2>
    </div>
  </div>
</div>

Answer 1

我想这就是你想要的。

https://jsfiddle.net/5zun4tqr/

我使用了那里的示例:Center element inside div (circle)

它会像那样始终保持在中心位置，当使用这种 flexbox 方法时，尺寸不会造成任何问题。

body {
  background: #0a0a0a;
}


.some-container {
  position: relative;
  display: inline-block;
}

.some-container2 {
  position: relative;
  display: inline-block;
  margin-left: 80px;
}

.some-container3 {
  position: relative;
  top: 30px;
  left: 30px;
}

.box1 {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
}

.box2-container {
  display: flex;
  position: relative;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  border: darkgreen solid 1px;
  box-sizing: border-box; /* Because of the border */
  
}

@keyframes box2-rotation {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.box2 {
  width: 40px;
  height: 40px;
  border: 2px solid blue;
  position: absolute;
  border-radius: 50%; 
  border-color: blue blue blue transparent;
  border-width: 2px;
  animation: box2-rotation 3s linear infinite;
}


.replace1 {
  width: 30px;
  height: 30px;
}

.replace2 {
  width: 30px;
  height: 30px;
}

.replace3 {
  width: 60px;
  height: 60px;
}

.box3 {
  width: 80px;
  height: 80px;
  border: 2px solid;
  position: absolute;
  border-radius: 50%; 
  border-color: green green green transparent;
  border-width: 2px;
  animation: box2-rotation 4s linear infinite;
}

.box4 {
  width: 120px;
  height: 120px;
  position: absolute;
  animation: box4-rotation 6s linear infinite;
}

@keyframes box4-rotation {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.box4-circle {
  stroke-dasharray: 52.275;
  stroke-width: 2px;
  animation: box4-rotateion 6s linear infinite;
  animation-fill-mode: both;
  transform-origin: center;
}

<div class=some-container3>
  <div class=some-container>
    <div class=box1>
    </div>
    <div class=box2-container>
      <div class=box2>
      </div>
    </div>
  </div>

  <div class=some-container2>
    <div class="box1 replace1">
    </div>
    <div class="box2-container replace2">
      <div class="box2 replace3"></div>
      <div class="box3"></div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 107 107" class="box4">
          <circle class="box4-circle" cy=50% cx=50% r=50 stroke=white fill=none></circle>
        </svg>
      </div>
    </div>
  </div>
</div>