How do I vertically center text with CSS?

html

responsive-design

css

styling

byNikita Barsukov·Sep 15, 2024

Easily center text vertically using Flexbox: set display: flex;, justify-content: center;, and align-items: center;:

.centered-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 170px;
  background: black;
  color: white;
  font-size: 48px;
}

Apply to your element:

<div class="centered-text">Centered Text</div>

Perfect for any text amount, adapts seamlessly across devices.

More solutions to vertical centering

Solo Line Centering: lineHeight and textAlign

For single-line text, set the line-height to match the container's height:

div {
  height: 100px;
  line-height: 100px; /* Because two halves make a whole! */
  text-align: center; /* Front and center, just like your favorite movie seat */
}

This is your go-to when your container's height is known and the text won't wrap.

Legacy Support: table-cell method

When Flexbox gives you the cold shoulder (older browsers), simulate table behavior:

div {
  display: table; /* Hey look, we're a table now! */
}

span {
  display: table-cell; /* I always wanted to be a table cell */
  vertical-align: middle; /* Rising to the middle of fame */
  text-align: center; /* No favoritism, all sides matter */
}

<div>
  <span>Centered Text</span>
</div>

Ideal for multi-line text and in ensuring compatibility with legacy browsers.

Dynamic Heights: transform technique

When your elements have dynamic heights, go for:

div {
  position: relative; /* Adulting 101: Establish your position in life */
}

span {
  position: absolute; /* Screw adulting. I want to be an absolute kiddo */
  top: 50%; /* Climbing halfway up the mountain */
  transform: translateY(-50%); /* Realizing the view is better at the bottom */
  left: 0;
  right: 0;
  text-align: center; /* Aligning life goals... I mean text */
}

This centers regardless of the container's size - kind of like how some people are the center of attention no matter where they are!

Vertical Stacking: Flexbox column

Want to vertically stack multiple items?

div {
  display: flex;
  flex-direction: column; /* Everyone gets a view. A concert's first row experience for all */
  justify-content: center; /* Distributing fairness */
  height: 300px; /* Size does matter after all */
}

Perfect for creating a column layout where each child is evenly spaced and happily centered.

Cross-browser prefixing: All browsers matter

Include Flexbox vendor prefixes to keep all browsers happy:

.centered-text {
  display: -webkit-flex; /* Safari gate-crashing the flex party */
  display: flex;
  /* Other prefixed properties */
}

Check support on websites like caniuse.com, and use tools like flexyboxes to help you with cross-browser Flexbox styles.

Mixins for code reuse

Create SASS/SCSS mixins to reuse vertical centering styles across projects:

@mixin vertical-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  @include vertical-center; /* I've always wanted to be a center */
}

Finer points in styling

Lean on visual styling to add character to your centered element:

div {
  height: 90px;
  width: 270px;
  background: #000; /* Once you go black, you can't go back */
  color: #FFF; /* White lies aren't harmful, they add light */
  margin: 10px; /* The safe personal space we all need */
}