Logo
Back

How do I vertically align text in a div?

Vertically centering text (or any inline content) inside a <div> can be achieved in several ways, depending on your layout.

Below are several ways to vertically center text (or any inline element) within a <div>. Each approach has different advantages depending on the layout and content.

1. Use Flexbox

.container {
  display: flex;
  align-items: center;   /* Vertically centers items in the container */
  justify-content: center; /* Optionally center horizontally as well */
  height: 200px;        /* Must have a defined height */
  border: 1px solid #000; /* Just for visibility */
}
<div class="container">
  <p>This text is vertically centered using Flexbox.</p>
</div>
  • Pros: Easiest modern solution; works for multi-line text, images, or any other elements.
  • Cons: Requires a known height and support for Flexbox (widely supported in modern browsers).

2. Use line-height (Single-Line Only)

.single-line {
  height: 200px;
  line-height: 200px;  /* Matches the container height */
  border: 1px solid #000;
}
<div class="single-line">
  This single-line text is vertically centered.
</div>
  • Pros: Very simple for short, one-line text.
  • Cons: Doesn’t work if the text wraps to multiple lines or if you need to dynamically size the container.

3. Use display: table-cell;

.table-cell {
  display: table;
  height: 200px;
  border: 1px solid #000;
}
.table-cell div {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* optional horizontal centering */
}
<div class="table-cell">
  <div>This text is vertically centered using table-cell.</div>
</div>
  • Pros: Works well in older browsers that don’t fully support Flexbox. Good for multi-line text.
  • Cons: Mimics a table layout, which may cause layout quirks if you aren’t careful.

4. Absolute Positioning (Less Recommended)

.absolute-container {
  position: relative;
  height: 200px;
  border: 1px solid #000;
}
.absolute-container p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center; /* optional horizontal centering */
}
<div class="absolute-container">
  <p>This text is vertically centered using absolute positioning.</p>
</div>
  • Pros: Straightforward if you have a fixed-height container.
  • Cons: Can break if the text grows taller than the container or if you need a responsive height.

Best Practices

  1. Flexbox: The go-to modern solution for vertically centering content, including multi-line text or mixed content (text + images).
  2. line-height: Quick fix for single-line text.
  3. table-cell: A fallback for older browsers or if you’re already using table-like layouts.
  4. Absolute Positioning: Fine for small, fixed-height containers, but not flexible for responsive or multi-line text.

Strengthen Your Web Development Skills

If you want to polish your front-end skills and gain more in-depth knowledge of JavaScript (often used for dynamic layouts or DOM manipulation), consider these courses on DesignGurus.io:

They provide pattern-based learning and practical exercises that can greatly improve your overall development workflow. For additional tutorials on coding and system design best practices, visit the DesignGurus.io YouTube channel. By choosing the method that best fits your layout, you’ll confidently align text vertically in any modern web application.

CONTRIBUTOR
TechGrind