<div class="parent"> <div class="element"> I'm bang in the center! </div> </div>
/* variables */ /* colours */ $grey: rgba(220, 231, 235, 1); $lightgrey: rgba(220, 231, 235, 0.25); $blue: rgba(34, 190, 198, 1); $white: rgba(255, 255, 255, 1); /* fonts */ $sans: 'Ubuntu', sans-serif; $heading: 'Source Sans Pro', sans-serif; body { background: $grey; font-family: 'Ubuntu', sans-serif; color: $white; } /* parent */ .parent { position: relative; background: $grey; width: 100%; height: 100vh; } /* class to center element */ .center-me { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* element to be centered */ .element { @extend .center-me; background: $blue; padding: 5%; }