Css dynamically rotate a div inside parent leaves gaps

I have a grid like structure full of rectangles, and currently using inline-flex to create this grid.

The rectangles are almost squares.

inside each rectangle i have a child div containing an image as background, and filling the parent div completely.

NOW!

When using javascript to rotate the inner div with image background to either 90 degrees or 270degrees when the inner div rotates, it leaves gaps on the edges between the inner div and the parent div.

I have tried using display = inline-block, block, grid (all), table(all) and everything else i can think of.

I even have a possible solution, however im not sure its the best and 100% full proof.

if the block width is 178px and the height is 160px before rotation, after rotating i switch the height and the width so the width becomes 160px and the height becomes 178px.

Now!! i noticed i i take the lowest width of 160px and minus the larger width of 178px, then divide it by 2 i get -9px. if i make the position absolute, left -9px, the block fits perfectly left. with the height i use Math,abs(-9), for position top and the block now fits flawlessly.

I'm not feeling comfortable with this solution.

How can i rotate my dive to fit perfectly.

.flexParent {
  display: block;
  position: absolute;
  width: auto;
  height: auto;
}

.parentBlock {
  display: inline-flex;
  width: 178px;
  height: 160px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.parentBlock>.imageBlock {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  /*background: url('url/to/image.png');*/
  background: url('https://via.placeholder.com/150');
  width: 178px;
  height: 160px;
}

.parentBlock>.imageBlock.rotated {
  transform-origin: center center;
  transform: rotate(270deg);
  background-color: #ff0033;
  height: 178px;
  width: 160px;
  left: -9px;
  top: 9px;
}

<div class="flexParent">
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock rotated"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div>
  <div class="parentBlock">
    <div class="imageBlock"></div>
  </div </div>

I figured it out. Using absolute position, left:50%, top:50%, transform: translate(-50%, -50%); but must be done as below:

<style> div.parent{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:150px; height: 220px; background-color: red; } div.child { position:absolute; left:50%; top:50%; transform-origin: center center; transform: translate(-50%, -50%) rotate(90deg); height: 100px; width: 160px; background: limegreen; color: white; font-family: sans-serif; }
</style>

the order of the child css is very important. Unfortunetly for some reason i cant post answers here.. hope this helps you.