title: How to position child div to the center of every parents div using position absolute in css
body: <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>