How to Center Text Vertically in CSS

CSS gives you several ways to center text vertically, depending on the layout. This guide shows the most practical methods, from flexbox and grid to simple single-line button text.

What you’ll build or solve

You’ll center text vertically inside containers such as cards, buttons, banners, and full-height sections. Done means the text sits in the middle of its parent without awkward spacing or fragile hacks.

When this approach works best

Vertical centering works best when:

• You want text centered inside a button or badge.
• You need a heading centered inside a hero section.
• You want card content to sit in the middle of a fixed-height box.
• You need a simple layout that stays centered on different screen sizes.

This is a bad idea if the text should follow normal document flow. For long paragraphs or article content, natural spacing usually works better than forced vertical centering.

Prerequisites

• A basic HTML file
• A CSS file or <style> block
• Basic knowledge of CSS selectors
• A parent element with a known height, padding, or layout context

No JavaScript is required.

Step-by-step instructions

Step 1: Use flexbox for most layouts

Flexbox is the most common way to center text vertically inside a container.

<div class="card">
    <p>Centered text</p>
</div>

.card {
    height: 200px;
    display: flex;
    align-items: center;
}

align-items: center centers the text vertically along the cross axis. In a normal row layout, that means top to bottom.

To center the text both vertically and horizontally, add justify-content: center:

.card {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

This works well for cards, banners, buttons, modals, and empty states.

What to look for

• The parent needs height, min-height, or enough space to center within.
• align-items handles vertical centering in the default flex direction.
• justify-content handles horizontal centering in the default flex direction.
• If you set flex-direction: column, the axes switch.

Step 2: Use grid for one-line centering

CSS grid can center text with very little code.

<div class="hero">
    <h1>Learn CSS</h1>
</div>

.hero {
    min-height: 300px;
    display: grid;
    place-items: center;
}

place-items: center centers the content vertically and horizontally.

If you only want vertical centering, use:

.hero {
    min-height: 300px;
    display: grid;
    align-items: center;
}

Grid works especially well when the container has one main piece of content, such as a heading, message, or callout.

Step 3: Use line-height for single-line text

For single-line text, such as a small button or badge, line-height can center text vertically.

<button class="button">Save</button>

.button {
    height: 44px;
    line-height: 44px;
    padding: 0 16px;
}

The line-height matches the element height, so the text sits in the middle.

This method is only safe for one line of text. If the text wraps, the layout can break.

For buttons with icons or possible wrapping, flexbox is more reliable:

.button {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

Step 4: Use padding for natural vertical spacing

Sometimes you do not need true vertical centering. Equal top and bottom padding can create a centered look while keeping the element flexible.

<div class="notice">
    <p>Your changes were saved.</p>
</div>

.notice {
    padding: 24px 32px;
}

This works well for alerts, labels, cards, and text blocks that may grow.

Use padding when the content height should define the box. Use flexbox or grid when the box already has a set height.

Examples you can copy

Example 1: Center text in a card

<div class="info-card">
    <p>No messages yet</p>
</div>

.info-card {
    height: 180px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

This centers the message in both directions.

Example 2: Center a hero heading

<section class="hero">
    <h1>Start learning today</h1>
</section>

.hero {
    min-height: 400px;
    display: grid;
    place-items: center;
    text-align: center;
}

Grid keeps the heading centered inside the hero section.

Example 3: Center button text

<button class="primary-button">Continue</button>

.primary-button {
    min-height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

This keeps the button text centered and allows the button to grow if needed.

Example 4: Center text in a full-screen section

<section class="empty-state">
    <div>
        <h2>No projects yet</h2>
        <p>Create your first project to get started.</p>
    </div>
</section>

.empty-state {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

This centers the empty state in the available viewport height.

Common mistakes and how to fix them

Mistake 1: Using vertical-align on a block element

What you might do:

.card {
    height: 200px;
    vertical-align: middle;
}

Why it breaks: vertical-align does not vertically center normal block content. It mainly affects inline, inline-block, and table-cell elements.

Correct approach:

.card {
    height: 200px;
    display: flex;
    align-items: center;
}

Use flexbox for block layouts.

Mistake 2: Forgetting the parent height

What you might do:

.card {
    display: flex;
    align-items: center;
}

Why it breaks: There may be no extra vertical space to center within. The parent is only as tall as its content.

Correct approach:

.card {
    min-height: 200px;
    display: flex;
    align-items: center;
}

Give the parent a height, min-height, or enough padding.

Mistake 3: Using line-height for multi-line text

What you might do:

.card {
    height: 120px;
    line-height: 120px;
}

Why it breaks: This only works cleanly for one line. Multi-line text becomes cramped or misaligned.

Correct approach:

.card {
    min-height: 120px;
    display: flex;
    align-items: center;
}

Use flexbox when text may wrap.

Troubleshooting

If the text does not move vertically, check that the parent has height or min-height.

If flexbox centers the text in the wrong direction, check flex-direction.

If the text is centered vertically but not horizontally, add justify-content: center or text-align: center.

If line-height breaks on smaller screens, switch to flexbox.

If text wraps and looks uneven, avoid fixed heights and use padding or min-height.

If grid centering affects more elements than expected, wrap the text in a child element and center that child.

Quick recap

• Use flexbox for most vertical centering tasks.
• Use grid with place-items: center for simple centered layouts.
• Use line-height only for single-line text.
• Use padding when the box should grow with content.
• Give the parent enough height or space.
• Avoid vertical-align for normal block layout centering.