Discussion on: CSS Battle #3 - Push Button

[Chetan]

Earlier I thought the only way to the center is to use flexbox or grid I learned the margin thing works too
and I was confused between the use of relative and position but now all doubts cleared here. Border kind of pain as I usually forget border-style: solid and then I scratch my head.
Nevertheless great work from Olzhas. You help real people learn!

<div class="container">
  <div>

  </div>
  <div>

  </div>
    <div>

  </div>
</div>
<style>
  body{
    background:#6592CF;
        display: grid;
        justify-content: center;
        align-content: center;
  }
  .container{
      position: relative;
      height:150px; 
      width:300px;
      background:#243D83;
  }
  .container>div{
    left:50%;
      top:50%;
      transform: translate(-50%, -50%);
      position: absolute;
  }

  .container > div:first-child {        

      border-color: #EEB850;
      border-radius: 50%;
      border-width: 25px;
      z-index:3;

      border-style: solid;
    }
      .container > div:nth-child(2) {        
      border-color: #243D83;
      border-radius: 50%;
      border-width: 75px;
      border-style: solid;
      z-index:2;
    }

      .container > div:nth-child(3) {        
      border-color: #6592CF;
      border-radius: 50%;
      border-width: 125px;
      border-style: solid;
        z-index:1;
    }

</style>