Centering - Using CSS Transform

• CSS transforms are based on the size of the elements so if you don't know how tall or wide your element is, you can
  position it absolutely 50% from the top and left of a relative container and translate it by 50% left and upwards to
  center it vertically and horizontally.

 <div class="container">
   <div class="element"></div>
 </div

 .container {
   position: relative;
 }
 .element {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }