How do I vertically center text with CSS?

There’s no single universal approach for vertically centering text, because what you use often depends on the layout context (inline elements, block-level containers, fixed heights, fluid heights, etc.). Below are the most common methods:

1. Using line-height (For Single-Line Text)

If your element has only one line of text, you can set its line-height to match its container’s height. The text will then appear centered vertically.

.box {
  width: 200px;
  height: 50px;
  background: #ddd;
  line-height: 50px; /* matches container height */
  text-align: center;
}

• Pros: Simple for single-line text in a fixed-height container.
• Cons: Breaks if the text wraps to multiple lines or if the container’s height is dynamic.

2. Using Flexbox

Flexbox is a modern, versatile solution. By default, align-items: center; will vertically center content within a flex container.

.parent {
  display: flex;
  align-items: center;     /* vertically center items */
  justify-content: center; /* horizontally center items (optional) */
  height: 200px;
  background: #ddd;
}

.child {
  background: #bbb;
  padding: 10px;
}

• Pros:
  • Great for multi-line text or variable height content.
  • Easy to combine with horizontal centering.
  • Works even if content grows or shrinks dynamically.
• Cons: Requires display: flex; on the parent, which changes the layout of child elements in other ways (may need to consider flex-direction if you want columns/rows).

3. Using CSS Grid

If you’re already using Grid Layout, you can also center items both horizontally and vertically with:

.container {
  display: grid;
  place-items: center; /* short for align-items: center; justify-items: center; */
  height: 200px;
  background: #ddd;
}

.text {
  background: #bbb;
  padding: 10px;
}

• Pros:
  • Very concise: place-items: center;.
  • Handles both horizontal and vertical centering.
• Cons: Requires a CSS Grid environment. May be overkill if you just need to center one item in a simple layout.

4. Using display: table-cell; (Older Technique)

Before Flexbox or Grid, developers used table/table-cell display properties:

.parent {
  display: table;
  width: 200px;
  height: 200px;
  background: #ddd;
}

.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* optional for horizontal center */
}

• Pros:
  • Works in older browsers that don’t support Flexbox/Grid well.
• Cons:
  • Can be less intuitive, since you’re essentially simulating table behavior for layout.
  • Not recommended for modern projects unless you need older browser support.

5. Absolute Positioning (With Known Height)

You can also center text with position: absolute; if you know the container’s height. For example:

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background: #ddd;
}

.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• Pros:
  • Works if the container has a known, fixed size.
  • Combined with transform: translate(-50%, -50%), it centers both horizontally and vertically.
• Cons:
  • Not ideal for dynamic heights or multi-line content that might change the layout.

Which Method Should You Use?

• Single-Line Text with fixed height: line-height.
• Flexible Layouts (multi-line or dynamic content): Flexbox or Grid is preferred.
• Legacy Support: display: table-cell; if you need to support older browsers.
• Absolute Positioning only if you’re sure about container dimensions and want full control over positioning.

Summary

1. Flexbox or CSS Grid are the most robust ways to vertically center in modern web layouts—no need to guess heights.
2. line-height is quick and easy for single lines in a known-height container.
3. table-cell method works pre-Flexbox but is less recommended now.
4. Absolute positioning can center, but can be fragile for responsive or variable-height content.

Choose based on your project’s layout constraints, browser requirements, and whether the container/content sizing is fixed or fluid.