How to position child div to the center of every parents div using position absolute in css
<p>I'm having difficulty on positioning child div's on every parents div.</p>

<p>Here's the css code: </p>

<pre><code>.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;
  left: 0;
  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%;
}
</code></pre>

<p>Here's the <a href="https://jsfiddle.net/aldrin27/8Lcx1y5r/" rel="nofollow noreferrer">fiddle</a></p>