Как центрировать абсолютный элемент в другом абсолютном элементе, который можно использовать для вращения и анимации

Question

Чтобы было понятно, у меня есть два квадрата, у них обоих position: absolute, и они находятся внутри другого элемента div, имеющего относительную позицию.

Это больше относится к дизайну пользовательского интерфейса, а не к центру двух элементов div вдруг с другом и используйте if for web, это скорее интерфейс или анимация для всплывающих окон или аналогичных.

Это значит, что у меня может быть круг, который где-то больше, чем box1. Затем я использую невидимое поле с относительным положением, которое содержит box2 как дочерний элемент

Оба квадрата имеют разный размер.

Новый пример проблемы здесь: https://jsfiddle.net/mgznef98/2/

Красное поле не может изменять положение Граница так или иначе должна быть отцентрирована. И я поместил его в контейнер box2, чтобы поддержать его, потому что box1 мог бы быть другой формой, а не простым боксом, если бы я его отредактировал

"some-container" - это просто "вещь ", которая будет перемещаться по сайту и нести все" ящики ", поэтому ее нельзя использовать с ячейкой таблицы.

Если вы посмотрите на это Поворот объектов вокруг круга с помощью 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>

Answer 1

Я думаю, это то, что вы хотели.

https://jsfiddle.net/5zun4tqr/

Я использовал пример оттуда: Центральный элемент внутри div (кружок)

Он всегда будет оставаться в центре, поэтому размер не должен вызывать проблем при использовании с этим методом 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>

Answer 2

Лично я бы не делал это с абсолютными позициями, если бы все, что вы делаете, пыталось центрировать div внутри другого. Выполнение подобного с помощью flex идеально отцентрирует ваш бокс 2 внутри блока 1.

<div>
 <div class=box1>
  <div class=box2>
 </div>
</div>

.box1 {
  width: 40px;
  height: 40px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box2 {
  width: 20px;
  height: 20px;
  background: blue;
}