SASS Mixin For Vertically Centering Elements With Unknown Heights

By January 17, 2017Blog, SASS/SCSS
Allure Web Solutions Code Snippet

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

 

Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Leave a Reply