Ask any question about CSS here... and get an instant response.

How can I center text vertically inside a div using Flexbox?

Asked on Aug 24, 2025

Answer

To center text vertically inside a div using Flexbox, you can set the container's display to flex and use the align-items property to center the content vertically.

<!-- BEGIN COPY / PASTE -->
    <div style="display: flex; align-items: center; height: 200px; border: 1px solid #ccc;">
      <p>This text is vertically centered.</p>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

The "display: flex;" property turns the div into a flex container.
"align-items: center;" vertically centers the content within the flex container.
The height of the container must be defined for vertical centering to take effect.
Flexbox is a powerful layout tool for both vertical and horizontal alignment.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I center text vertically inside a div using Flexbox?

Asked on Aug 24, 2025

Answer

The Q&A Network