Centering via position and transform

centering.scss

// Position an element horizontally (requires a 'position: relative' parent)
@mixin horizontal-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

// Position an element vertically (requires a 'position: relative' parent)
@mixin vertical-center {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

// Position an element both vertically AND horizontally (requires a 'position: relative' parent)
@mixin center {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}