Center Utilities

.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.center-v { position: absolute; top: 50%; transform: translatey(-50%) }
.center-h { position: absolute; left: 50%; transform: translatex(-50%) }
.center-obj { top: -1px; position: relative; vertical-align: middle }

@media screen and (min-width:  576px) {
  .sm:center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
  .sm:center-v { position: absolute; top: 50%; transform: translatey(-50%) }
  .sm:center-h { position: absolute; left: 50%; transform: translatex(-50%) }
  .sm:center-obj { top: -1px; position: relative; vertical-align: middle }
}

@media screen and (min-width:  768px) {
  .md:center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
  .md:center-v { position: absolute; top: 50%; transform: translatey(-50%) }
  .md:center-h { position: absolute; left: 50%; transform: translatex(-50%) }
  .md:center-obj { top: -1px; position: relative; vertical-align: middle }
}

@media screen and (min-width:  992px) {
  .lg:center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
  .lg:center-v { position: absolute; top: 50%; transform: translatey(-50%) }
  .lg:center-h { position: absolute; left: 50%; transform: translatex(-50%) }
  .lg:center-obj { top: -1px; position: relative; vertical-align: middle }
}

@media screen and (min-width:  1200px) {
  .xl:center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
  .xl:center-v { position: absolute; top: 50%; transform: translatey(-50%) }
  .xl:center-h { position: absolute; left: 50%; transform: translatex(-50%) }
  .xl:center-obj { top: -1px; position: relative; vertical-align: middle }
}