.left-top {
  position: absolute;
  left: 0%;
  top: 0%;
  transform: translate(-0%,-0%);
}

.center-top {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%,0%);
}

.right-top {
  position: absolute;
  left: 100%;
  top: 0%;
  transform: translate(-100%,0%);
}

.right-center {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-100%,-50%);
}

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

.left-center {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0%,-50%);
}

.left-bottom {
  position: absolute;
  left: 0;
  top: 100%;
  transform: translate(0%,-100%);
}

.center-bottom {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%,-100%);
}

.right-bottom {
  position: absolute;
  left: 100%;
  top: 100%;
  transform: translate(-100%,-100%);
}

.relative {
  position: relative;
}

.quarter {
  height: 25vh;
}

.half {
  height: 50vh;
}

.three-quarter {
  height: 75vh;
}

.full {
  height: 100vh;
}