SASS Mixin For Vertically Centering Elements With Unknown Heights

This SCSS mixin allows you to vertically center all children of a specific parent. It’s a cool mixin because it allows vertical centering even when the heights of both the parent and children is unknown.

The Mixin

@mixin centerChildren($child) {
  text-align: center;
  &:before {
    content: '\200B';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .#{$child} {
    display: inline-block;
    vertical-align: middle;
  }
}

Usage

.parentClass {
  @include centerChildren(childClass);
}

Change ParentClass and childClass to whatever you need

See It In Action

See the Pen SASS Mixin For Vertically Centering Elements With Unknown Heights by Mike Doubintchik (@allurewebsolutions) on CodePen.