Skip to main content

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;


.parentClass {
  @include centerChildren(childClass);

Change ParentClass and childClass to whatever you need



Author allure

More posts by allure

Leave a Reply

Designed by

best down free | web phu nu so | toc dep 2017