CSS Tip

Perfectly center an uppercase text

Are you tired of the unwanted spaces above and below your text? One line of code can fix this and you can have a perfect centering for your uppercase text.

Vertically center uppercase text

.text {
  text-box: cap alphabetic;
}

Chrome-only for now

See the Pen Perfectly centered uppercase! by Temani Afif (@t_afif) on CodePen.

Another interesting one in case you have a lowercase text (without ascender or descender).

.text {
  text-box: ex alphabetic;
}

Vertically center lowercase text

See the Pen Perfectly centered lowercase! by Temani Afif (@t_afif) on CodePen.

More CSS Tips