How to center a absolute element in another absolute element, that could be used for rotation and animation purposes

Question

To make it clear, I have two squares they both have position: absolute and are inside another div that has a relative position.

This is related more to a UI design and not about centering two divs into each other and use if for web, it's more a UI thing or an animation thing for popups or similar.

That means it could be that I have a circle that is bigger than box1 somewhere. Then I use an invisible box that has position relative that contains box2 as a child

Both of the squares have a different size.

New example of issue here: https://jsfiddle.net/mgznef98/2/

The red box is not allowed to change position The border somehow has to be centered. And I put it inside a box2-container to support it, because box1 could be another shape and not a simple box if I would edit it

"some-container" is just the "thing" that would move around the website and carry all of the "boxes", so it can't be used with table-cell.

If you would look at this Rotate objects around circle using CSS? On this page they rotate elements around the center of another element, but they're not inside the center. And I'm trying to put something in a center. That would be as example a square with a border that would rotate around.

I've managed to center the blue square inside the red square, somehow. I'm not even sure if it is exactly centered. https://jsfiddle.net/mgznef98 on this one before, but for the border one, I don't really know.

My question is, I think there is some math behind it. I think there has to be some formula to find out what to put inside "top" and "left" so I can center the blue "border" box exactly inside the red box when the red box changes the width and height.

What I know is that it changes depending on the size of box2 and its container and box1.

Example:

Let's say again I have two boxes but one of them is invisible, in this case the container of box2. And box2 is not a box instead it is "something" that rotates. And box1 is not a box, instead it is an element a shape or something that has a center. And box2 has a border instead of a background color, and that border has to rotate around the center of the element. The thing is that box2 is bigger than 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>

@TylerH I edited the question and the example. Please remove duplicate. — RevaR, Oct 17 '19 at 15:41
A centered object being off-center due to margin, border, padding, etc. is a separate problem. The issue of centering an element within another element is a well-covered one. — TylerH, Oct 17 '19 at 15:58
See https://stackoverflow.com/questions/30061415/vertical-center-a-rotated-div-inside-a-div — TylerH, Oct 17 '19 at 15:59
Also see https://stackoverflow.com/questions/32626746/how-to-position-a-rotated-element-in-the-middle-on-the-right — TylerH, Oct 17 '19 at 15:59
And https://stackoverflow.com/questions/44058504/center-element-inside-div-circle — TylerH, Oct 17 '19 at 15:59
As well as https://stackoverflow.com/questions/19185390/aligning-an-element-rotated-in-css — TylerH, Oct 17 '19 at 16:00
@TylerH The thing is that one of them might be centered but not vertically. Basically if there would be a transform-origin value that would change the origin of where it rotates and place it in the middle of the red circle it would solve the issue, but it didn't. I'm stuck at top and left like those two values need to be idk, dude how to explain — RevaR, Oct 17 '19 at 16:05

karl-police · Accepted Answer · 2019-10-17T23:35:03.827

I think this is what you wanted.

https://jsfiddle.net/5zun4tqr/

I've used the example from there: Center element inside div (circle)

It will always remain in the center like that, size shouldn't cause any problems when used with that flexbox method.

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>

score 0 · Answer 2 · answered Oct 17 '19 at 14:55

0

Personally I wouldn't do it with absolute positions if all you are doing is trying to center a div within another. Doing some like this with flex will perfectly center your box 2 within box 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;
}

answered Oct 17 '19 at 14:55

Tyler Jorgensen

11
1

Wait lemme rephrase my question – RevaR Oct 17 '19 at 15:03
This is related more to a UI design and not about centering two divs into each other and use if for web, it's more a UI thing or an animation thing for popups or similar. That means it could be that I have a circle that is bigger than box1 somewhere. Then I use an invisible box that has position relative that contains box2 as a child – RevaR Oct 17 '19 at 15:11

How to center a absolute element in another absolute element, that could be used for rotation and animation purposes

2 Answers2