center absolutely

view source

Center an absolutely positioned element horizontally, vertically, or both ways.

mixin only
  1. $dimensions

    A two-value list: the width and height of the element-to-be-centered (both optional). To bypass either and avoid centering in that dimension, pass n. See below.

This method only works if the element-to-be-centered has a fixed dimension on the relevant axis — fixed width to center horizontally, fixed height to center vertically. If your element cannot have fixed dimensions (and you do not need to support IE8), consider scut-center-transform.

If you do not want to center horizontally — only vertically — pass n (short for null, "no," "nothing," etc.) for the width value. Same goes for height, if you do not want to center vertically. See the examples below for clarification.



.eg-center-absolutely-container {
  position: relative;
.eg-center-absolutely-1 {
  @include scut-center-absolutely(22em 2.5em);
.eg-center-absolutely-2 {
  @include scut-center-absolutely(20em n);
.eg-center-absolutely-3 {
  @include scut-center-absolutely(n 2.5em);


Centered both horizontally and vertically
Centered only horizontally
Centered only vertically