How to Align Text Vertically Center in a Div Element Using CSS

One of the most common tasks in web design is vertically centering text inside a div. Whether you’re building a landing page, button, or card component, centered text creates a clean and balanced layout.

Thankfully, modern CSS offers several efficient ways to align text vertically within a div. In this article, we’ll explore best practices and real code examples to help you center text like a pro.

---

✅ Method 1: Using Flexbox (Most Popular)

🔹 HTML

<div class="flex-box">
  <p>Vertically centered text</p>
</div>

🔹 CSS

.flex-box {
  display: flex;
  align-items: center;      /* Align vertically */
  justify-content: center;  /* Align horizontally (optional) */
  height: 200px;
  border: 2px solid #4caf50;
}

✅ Why Use It?

• Works for both vertical and horizontal centering
• Responsive and modern
• Clean, readable code

---

✅ Method 2: Using Grid Layout

🔹 HTML

<div class="grid-box">
  <p>Centered using CSS Grid</p>
</div>

🔹 CSS

.grid-box {
  display: grid;
  place-items: center; /* align-items + justify-items */
  height: 200px;
  border: 2px dashed #2196f3;
}

💡 Benefits

• Very concise
• Perfect for simple centering tasks
• Ideal when you don’t need complex layout control

---

✅ Method 3: Using Line-Height (Only for Single Line Text)

🔹 HTML

<div class="line-height-box">Centered Text</div>

🔹 CSS

.line-height-box {
  height: 100px;
  line-height: 100px; /* Match the height */
  text-align: center;
  border: 2px dotted #ff9800;
}

⚠️ Caution

• Only works properly for single-line text
• Not suitable for multi-line paragraphs

---

✅ Method 4: Table-Cell Technique (Legacy-Compatible)

🔹 HTML

<div class="table-cell-box">
  <p>Using table-cell alignment</p>
</div>

🔹 CSS

.table-cell-box {
  display: table-cell;
  vertical-align: middle;
  height: 150px;
  width: 100%;
  text-align: center;
  border: 1px solid #ccc;
}

📌 Use Case

• Great for older browser support
• Slightly outdated in modern layouts

---

📊 Comparison Table

Method	Multi-line Support	Modern Support	Code Simplicity
Flexbox	✅	✅	✅
CSS Grid	✅	✅	✅
Line-height	❌	✅	✅
Table-cell	✅	✅	❌ (verbose)

---

🧾 Final Thoughts

If you’re working with modern browsers, Flexbox and Grid are the best tools for vertically centering text inside a div. They’re clean, flexible, and easy to maintain. For single-line text, the line-height trick is quick and effective. And when you need backward compatibility, the table-cell method is still a solid option.

---

Pro Tip: Combine vertical and horizontal centering to ensure your text looks centered across all screen sizes and resolutions.