Cacher is the code snippet organizer for pro developers

<div class="first-div">
  <div class="second-div">
    <div class="third-div">
    </div>
  </div>
</div>

body {
  background-color: peachpuff;
}
.first-div {
  width:80vw;
  height:80vh;
  background-color:#2196F3;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  /*item center*/
  display:flex;
  align-items:center;
  justify-content:center;
}
.second-div {
  width:80%;
  height:80%;
  background-color:#4caf50;
}
.third-div {
  width:60%;
  height:60%;
  background-color:#f98;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}