Gerillass 2.0.0 is out. It renames every utility function and replaces two mixins with one, so read the migration guide before you upgrade.
Gerillass
v2.1.0* 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%);
}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%);
}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%);
}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%);
}