Centering Mixins
Mutliple mixins are provided to center content in different ways using an absolute position. These are used to provide a shortcut for centering elements on the screen. For other options, see the alignment classes and the flexbox grid. Like other mixins, usage will require that you install mustard via npm and include the source within your main SCSS file.
Example Usage:
@include center-x()
@include center-y()
@include center-xy()
Mixin Code:
@mixin center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
@mixin center-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@mixin center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}