Vertically Centering Text

11/06/18 - That one thing that you can't do in CSS, but you really want to

Vertically centering text in CSS

Vertically centering text is very difficult to pull off. CSS has no official support, except in flexbox.

So here's how I do it on my website.

.parent {
    position: relative;
}
.child {
    position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

The old translateY trick is not without issues, but it works for most use cases. Others can play around with Flexbox.