A vertical-align mixin that changed my life

Aligning something vertically has always been a PITA in CSS, and in recent years I’ve used display:table-cell to achieve this, which is added to the parent object of the one you want to vertically align.

This method works ok mostly, but display:table-cell isn’t what you always want on an element, leading you to have to create another element which wraps your vertically-aligned one (and I don’t like having too many elements!).

I recently found these 3 lines of css, which work really well at aligning an element vertically:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

And stick these into a mixin, and you can import them into any style, like this:

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  @include vertical-align;
}

I’ll leave this here for when I need to copy & paste this into my next project!

Credit: I found this snippet here.