---
title: "How do I vertically align text in a div?"  
description: "How do I vertically align text in a div?"  
author: "Revati S Misra"  
published: 2023-04-24  
updated: 2023-04-25  
canonical: https://www.mindstick.com/forum/157995/how-do-i-vertically-align-text-in-a-div  
category: "html"  
tags: ["html", "css", "css position"]  
reading_time: 2 minutes  

---

# How do I vertically align text in a div?

How do I [vertically align](https://www.mindstick.com/forum/159390/how-do-i-vertically-align-text-in-a-div-please-provide-sample) [text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions) in a div?

## Replies

### Reply by Aryan Kumar

To vertically align text in a **div**, you can use the **display** and **align-items** properties. Here's an example of how to do it:

HTML code:

```html
<div class="container">
 <p class="text">Vertically centered text</p>
</div>
```

CSS Code:

```css
.container {
 display: flex;
 align-items: center;
 height: 200px;
}
.text {
 margin: auto;
}
```

In this example, we're using a **div** with a **class** of **container** to contain the text we want to center vertically. We're setting the **display** property of the **container** element to **flex** to allow us to use flexbox properties to vertically align the text.

We're then using the **align-items** property to center the text vertically within the **container** element. Setting **align-items: center;** centers the flex items along the cross axis (which is vertical in this case).

Finally, we're using the **margin: auto;** property on the **.text** class to center the text horizontally within the **container**.

Note that we're also setting a **height** on the **container** element to ensure that it has a fixed height. If you don't set a height, the **container** element will expand to fit the text, and the text won't be vertically centered.

This method using flexbox is widely used and supported in modern browsers, but if you need to support older browsers, you may need to use other methods like using **display: table-cell** or absolute positioning.


---

Original Source: https://www.mindstick.com/forum/157995/how-do-i-vertically-align-text-in-a-div

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.