center absolutely

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

use-name

scut-center-absolutely

type

mixin only

arguments

$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.

example

SCSS

.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);
}

compiled CSS

.eg-center-absolutely-container {
  position: relative;
}

.eg-center-absolutely-1 {
  position: absolute;
  width: 22em;
  left: 50%;
  margin-left: -11em;
  height: 2.5em;
  top: 50%;
  margin-top: -1.25em;
}

.eg-center-absolutely-2 {
  position: absolute;
  width: 20em;
  left: 50%;
  margin-left: -10em;
}

.eg-center-absolutely-3 {
  position: absolute;
  height: 2.5em;
  top: 50%;
  margin-top: -1.25em;
}

Result

Centered both horizontally and vertically

Centered only horizontally

Centered only vertically