How do I vertically center text?

Question

Aryan Kumar · Answer

To vertically center text using CSS, you can use a combination of the "display", "align-items", and "justify-content" properties. Here's an example:

HTML:

<div class="container">
 <p class="centered-text">Lorem ipsum dolor sit amet.</p>
</div>

CSS:

.container {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 200px;
 border: 1px solid black;
}
.centered-text {
 text-align: center;
}

In the example above, we set the "display" property of the container element to "flex" to enable flexible layout. We then set the "align-items" and "justify-content" properties to "center" to center the child element both vertically and horizontally. We also set the height of the container element to 200px to give it a fixed height. Finally, we added the "text-align" property to the centered-text element to center the text horizontally within its container.

You can adjust the height of the container element to suit your needs, and you can apply this technique to any type of element, such as a div or a span.

forum

How do I vertically center text?

Can you answer this question?

1 Answers