Center

Type: Mixin

@include center();

* You can call mixins with or without gls- namespace (e.g. @include gls-center();).

Center Sass mixin allows you to center elements (the elements that have position value either absolute or fixed) on both the horizontal and vertical axes.

Important: You must declare either position: absolute or position: fixed style rule to the selected element to make this mixin work correctly. The parent element’s position value, which you’ll be centering within must be other than static.

Note that in mind that because this mixin uses the CSS ‘transform’ property, this property will no longer be available for the selected element!

Github Source Code

Arguments

Name	Type	Description
`$axis`	`string`	Sets the axis of the alingment. Accepts `horizontal`, `vertical` and `both` values. The default value is set to `both`.

* Pass both value to center an element on both the horizontal and vertical axes, or do not pass 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;
  }
}

//CSS Output
.parent-element {
  position: relative;
}
.parent-element .element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Gerillass

Let’s center the selected element on horizontal axis only.

.parent-element {
  position: relative;
  .element{
    position: absolute;
    @include center(horizontal);
  }
}

//CSS Output
.parent-element {
  position: relative;
}
.parent-element .element {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Gerillass

Now let’s center the selected element on vertical axis only.

.parent-element {
  position: relative;
  .element{
    position: absolute;
    @include center(vertical);
  }
}

//CSS Output
.parent-element {
  position: relative;
}
.parent-element .element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Gerillass

Now let’s pass both value to center the selected element on both the horizontal and vertical axes.

.parent-element {
  position: relative;
  .element{
    position: absolute;
    @include center(both);
  }
}

//CSS Output
.parent-element {
  position: relative;
}
.parent-element .element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}