How do I vertically center text with CSS?
Whether you're working with a div, a full page layout, or flexbox containers, vertically centering text in CSS can be done in a few clean ways. Let's explore the most effective methods to align your content beautifully in the center!
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