Gerillass
v2.1.0Type: Mixin
@include center();
* You can call mixins with or without the gls- namespace (e.g. @include gls-center();).
The Center Sass mixin allows you to center elements (those with a position value of either absolute or fixed) on both the horizontal and vertical axes.
Arguments
| Name | Type | Description |
|---|---|---|
$axis | string | Sets the axis of the alignment. Accepts the values horizontal, vertical, and both. The default value is both. |
Pass the both value to center an element on both the horizontal and vertical axes, or pass nothing at all.
Examples
Simply call the mixin without passing any arguments to center the selected element on both the horizontal and vertical axes.
.parent-element {
position: relative;
.element{
position: absolute;
@include center;
}
}.parent-element {
position: relative;
}
.parent-element .element {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}Result
Let's center the selected element on the horizontal axis only.
.parent-element {
position: relative;
.element{
position: absolute;
@include center(horizontal);
}
}.parent-element {
position: relative;
}
.parent-element .element {
position: absolute;
left: 50%;
transform: translateX(-50%);
}Result
Now let's center the selected element on the vertical axis only.
.parent-element {
position: relative;
.element{
position: absolute;
@include center(vertical);
}
}.parent-element {
position: relative;
}
.parent-element .element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}Result
Now let's pass the both value to center the selected element on both the horizontal and vertical axes.
.parent-element {
position: relative;
.element{
position: absolute;
@include center(both);
}
}.parent-element {
position: relative;
}
.parent-element .element {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}Result