How do I vertically center text with CSS?

Vertically centering text with CSS used to be a bit tricky, but thankfully there are now several reliable and easy methods to do it! It depends a little on the layout you're working with, but here are some of the most common ways to center text vertically:

1. Using Flexbox (Recommended)

This is the most modern and flexible way:

.parent {
  display: flex;
  align-items: center;
  justify-content: center; /* Optional: for horizontal centering too */
  height: 200px; /* Make sure the parent has height */
}

• Works well for dynamic content
  
• Easy to use and read
  

2. Using Grid

CSS Grid is also great for centering:

.parent {
  display: grid;
  place-items: center;
  height: 200px;
}

• Super concise
  
• Centers both vertically and horizontally in one line!
  

3. Using Line Height (for single-line text)

.parent {
  line-height: 200px;
  height: 200px;
  text-align: center;
}

• Best for simple, single-line text
  
• Not ideal for multiline content
  

4. Using Positioning and Transform

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

• Works even without Flexbox
  
• Great for fixed-size elements