<!-- Using Flex Box-->
<h1>Using flex</h1>

<section class="using-flex">
  <div>
    Vertically centered using flexbox
    
  </div>
</section>

<!--Using grid-->
<h1>Using grid</h1>
<section class="using-grid">
  <div>
    Vertically centered using grid
    
  </div>
</section>

<!--Using table cell-->
<h1>Using table cell</h1>
<section class="using-tablecell">
  <div>
    Vertically centered using table cell
    
  </div>
</section>


<!--Using Transform-->
<h1>Using transform</h1>
<section class="using-transform">
  <div>
    Vertically centered using Transform
   
  </div>
</section>

h1{
text-align:center;
}
body{
  font-family:sans-serif;
  
}
.using-flex{
  height:20rem;
  width:100vw;
  background-color:rgba(0,0,0,.8);
  color:white;
 display:flex;
  align-items:center;
}

div{
width:40rem;
border:1px solid;
padding:.3rem;
}



.using-grid{
  height:20rem;
  width:100vw;
  background-color:rgba(0,0,0,.8);
  color:white;
 display:grid;
  align-items:center;
}

.using-tablecell{
  height:20rem;
  width:100vw;
    background-color:rgba(0,0,0,.8);
  color:white;
display: table-cell;
    vertical-align: middle 
}


.using-transform{
   height:20rem;
  width:100vw;
   background-color:rgba(0,0,0,.8);
  color:white;
  position:relative;
}

.using-transform div{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
    
}