Vertically Centering Text

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.