IVAN STANTON

Junior Web Developer

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.