How do I vertically align text in a div?

html

responsive-design

css

best-practices

byAnton Shumikhin·Nov 11, 2024

Flexing your CSS muscles? Flexbox, the one-stop solution, is your answer. Swirl these styles onto your div:

.testimonialText {
  display: flex; /* Turn this div into a gym - a flex-container */
  align-items: center; /* Lift that text up, buddy */
  height: 200px; /* Adjust the height to your liking */
}

And:

<div class="testimonialText">Center of attention coming through!</div>

Cut to the chase: this CSS snippet vertically centers the text.

Breaking down vertical alignment

In vertical alignment, a simple setup can morph into a tough nut to crack. Fear not, we'll untangle the most potent techniques and bail-out fallbacks.

Single-line vs multi-line text

In the single-line text world, set your div height and line-height to the same value for easy centering:

.singleLine {
  height: 50px;
  line-height: 50px; /* Who's the exact copycat? */
}

For multi-line text, the Flexbox model prevails—as illustrated in our fast-answer section.

Retro support: Older browsers

To please the retro crowd (hawkward huh?), put the table display method to good use:

.legacyCenter {
  display: table; /* Going old school */
  width: 100%;
}
.legacyCenter p {
  display: table-cell; /* Feeling nostalgic yet? */
  vertical-align: middle; /* Seeing the real meat */
}

However, remember this method's kryptonite: it's not as flexible with dynamic content sizes.

Transformative alignment

Pair positioning with CSS transforms for style and poise:

.transformCenter {
  position: relative;
  top: 50%; /* Climbing halfway up */
  transform: translateY(-50%); /* "Halfway up? Psych! I'm going back down!" */
}

Pro tip: Arm yourself with browser-specific prefixes for cross-browser compatibility.

IE-nding troubles: Compatibility with the old guard

Older Internet Explorer versions often announce their entrance with compatibility issues. In the IE6/7 scenario, consider magic solutions like conditional comments for dedicated stylesheets or hacks with the # in selectors.

Debugging aid: Visual indicators

Add temporary crayon strokes like border: 1px solid lime; or background-color: #888; for a quick visual confirmation of your alignment.

Overflow control: Keep it concise

Overflowing content can eat up the elegance of your page. Set overflow: hidden; and define the height to tackle overflow, keeping your layout neat and centered:

.overflowControl {
  overflow: hidden; /* Keep leaks at bay */
  height: 300px; /* Control your territory */
  display: flex;
  align-items: center; /* Don't let go of the center, mate! */
}

Responsive all the way

In the realm of responsive designs, use relative units like percentages or em for height and padding. The result—div alignment that flexes with changing screen sizes.

.responsiveCenter {
  padding: 10%; 
  height: 50vh; /* Embracing diversity */
  display: flex;
  align-items: center; /* Stick to the center, will you? */
}