Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.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.
Important: You must set either position: absolute or position: fixed on the selected element to make this mixin work correctly. The parent element you are centering within must have a position value other than static.
Keep in mind that because this mixin uses the CSS transform property, that property will no longer be available for the selected element!
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%);
}