<header class="title">6 ways to center-align using CSS</header>
<div class="parent">
  <div class="box using-transform">Using Transform</div>
</div>
<div class="parent">
  <div class="box">Using Flex</div>
</div>
<div class="parent">
  <div class="box using-margin">Using Margin</div>
</div>
<div class="parent">
  <div class="box">Using Grid</div>
</div>

<div class="parent">
  <div class="box">Using Padding</div>
</div>

<div class="parent ">
  <div class="box">Using Table Cell</div>
</div>
<footer>
  <div class="know-me"><a href="https://twitter.com/venkyakshaya" target="_blank"><i class="fab fa-twitter"></i>@venkyakshaya </div>
</footer>

$w: 200px;
$h: 200px;
* {
  box-sizing: border-box;
}
.box {
  background: pink;
  text-align: center;
  padding: 1rem;
  font-size: 1.5rem;
  font-family: sans-serif;
  text-transform: uppercase;
  color: darkslategrey;
  height: $h;
  width: $w;
}
.title {
  text-align: center;
  padding: 1rem;
  font-size: 1.5rem;
  font-family: sans-serif;
  text-transform: uppercase;
  color: darkslategrey;
  border: 10px solid darkslategrey;
  background-color: antiquewhite;
}
div.parent {
  min-height: 200px;
  height: 100vh;
  width: 100vw;
  position: relative;
  background-color: antiquewhite;
  box-sizing: border-box;
  border: 10px solid pink;
  &:nth-of-type(2) {
    @extend .using-flex;
  }
  &:nth-of-type(4) {
    @extend .using-grid;
  }
  &:nth-of-type(5) {
    @extend .using-padding;
  }
  &:nth-of-type(6) {
    @extend .using-table-cell;
  }
}
.using-transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.using-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.using-margin {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1); //Negated value of half the height and width
}
.using-grid {
  display: grid;
  place-items: center;
}
// or
.using-grid {
  display: grid;
  div {
    margin: auto;
  }
}
.using-padding {
  height: 600px;
  padding: 200px 0;
  div {
    margin: 0 auto;
    height: 100%;
  }
}
.using-table-cell {
  display: table-cell;
  vertical-align: middle;
  div {
    margin: auto;
  }
}
footer {
  padding: 1rem;
  border: 10px solid darkslategrey;
  background-color: antiquewhite;
  i {
    margin-right: 0.5rem;
    color: #1ea1f1;
  }
  div {
    max-width: 200px;
    margin: 0 auto;
    font-size: 1.5rem;
    a {
      text-decoration: none;
      color: darkslategrey;
    }
  }
}