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.
Recommended Links: