center transform

view source

Center an element without fixed dimensions, vertically, horizontally, or both ways, via CSS transform.

use-name

scut-center-transform

type

mixin, with extension placeholder(s)

arguments

$axis

default

false

Leave false to center on both axes; or set to x or y to center on one axis only.

compatibility

This utility uses a CSS transform, so will not work with IE8. Also note that transform requires vendor prefixes, which are included in the utility.

(If your element does have fixed dimensions on each axis you wish to center, you may enjoy the primitive browser support and vendorprefixlessness of scut-center-absolutely.)

Be warned: This method uses position: absolute, so the parent within which you'll be centering must have a position value other than static.

If you pass no arguments, both axes get the treatment; or you can pass x or y to center on one axis only.

These three varieties are available with three extension placeholders:

%scut-center-transform
%scut-center-tranform-x
%scut-center-transform-y

Also, notice that an alias is provided for vertical centering: scut-vcenter-tt (fitting the vcenter naming convention).

example

SCSS

.eg-center-transform-container {
  position: relative;
}
.eg-center-transform {
  display: inline-block;
}
.eg-center-transform-1 {
  @include scut-center-transform;
  // or @extend %scut-center-transform;
}
.eg-center-transform-2 {
  @include scut-center-transform(x);
  // or @extend %scut-center-transform-x;
}
.eg-center-transform-3 {
  @include scut-center-transform(y);
  // or @extend %scut-center-transform-y;
}
.eg-center-transform-4 {
  @include scut-center-transform;
}

compiled CSS

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

.eg-center-transform {
  display: inline-block;
}

.eg-center-transform-1 {
  position: absolute;
  top: 50%;
  margin-top: auto;
  margin-bottom: auto;
  left: 50%;
  margin-left: auto;
  margin-right: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.eg-center-transform-2 {
  position: absolute;
  left: 50%;
  margin-left: auto;
  margin-right: auto;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.eg-center-transform-3 {
  position: absolute;
  top: 50%;
  margin-top: auto;
  margin-bottom: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.eg-center-transform-4 {
  position: absolute;
  top: 50%;
  margin-top: auto;
  margin-bottom: auto;
  left: 50%;
  margin-left: auto;
  margin-right: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Result

Variation 1

Variation 2

Variation 3

Variation 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.