CSS - alignment

by Krishna Ananthi

HTML

<div class="out">
  <div class="in">
    
  </div>
</div>

CSS

.out{
  width:400px;
  height:400px;
   background-color:yellow; 
   position:relative;
}
.in{
  width:100px;
  height:100px;
   background-color:red; 
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}