JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainDiv">
  <div class="parent1">
    <div class="sub1">
        
    </div>
  </div>
  <div class="parent2">
    <div class="sub2">
      
    </div>
  </div>
</div>

CSS

.mainDiv {
  height:500px;
  
  position: relative;
}

.mainDiv .parent1 {
  height: 250px;
  background-color: blue;
  top: 50px;
   position: relative;
}

.mainDiv .parent2 {
  height: 250px;
  background-color: yellow;
   position: relative;
}


.mainDiv .parent1 .sub1 {
  width: 100px;
  height: 100px;
  background-color: green;

  position: absolute;
    
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
}

.mainDiv .parent2 .sub2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
}