如何在另一个绝对元素中居中，该绝对元素可用于旋转和动画目的

Question

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

这更多是与UI设计有关，而不是将两个div居中并用于web，更多是用于弹出窗口或类似内容的UI或动画。

这可能是因为我在某处有一个比box1大的圆。然后，我使用一个不可见的框，该框的相对位置包含box2作为子级

两个正方形都有不同的大小。

此处的新示例： https://jsfiddle.net/mgznef98/2/

不允许使用红色框更改位置。边框必须以某种方式居中。我将其放在box2-容器中以支持它，因为如果我要对其进行编辑，则box1可能是其他形状，而不是简单的盒子。

“ some-container”只是可以在网站上移动并带有所有“盒子”的“东西”，因此不能与表格单元一起使用。

[如果您查看此Rotate objects around circle using CSS?在此页面上，它们围绕另一个元素的中心旋转元素，但是它们不在中心内。我正在尝试将某些内容放在中心。例如，这是一个带有边框的正方形，边框可以旋转。

我设法以某种方式将蓝色正方形居中在红色正方形内。我什至不确定它是否居中。 https://jsfiddle.net/mgznef98在此之前，但对于边界一，我真的不知道。

我的问题是，我认为背后有一些数学问题。我认为必须有一些公式来找出要放在“顶部”和“左侧”内部的内容，以便当红色框更改宽度和高度时，我可以将蓝色“边框”框准确地置于红色框内。

我知道这取决于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>

为了清楚起见，我有两个正方形，它们都具有位置：absolute，并且位于另一个具有相对位置的div内。这更多地与UI设计有关，而不是与将两个div居中对齐...

Answer 1

我认为这就是您想要的。

https://jsfiddle.net/5zun4tqr/

Answer 2

个人而言，如果您要尝试将div居中放置另一个，我将不会使用绝对位置。用flex进行这样的操作将使第2个框完全位于第1个框的中央。

Answer 3

您可以通过各种方式使事物居中。