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

---

# How can I vertically align elements in a div?

How can I [vertically align](https://www.mindstick.com/forum/159390/how-do-i-vertically-align-text-in-a-div-please-provide-sample) [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) in a div?

## Replies

### Reply by Aryan Kumar

To vertically align elements in a **div**, you can use CSS flexbox or grid. Here are examples using both:

## Using CSS Flexbox:

```html
<div class="container">
 <div class="element">Element 1</div>
 <div class="element">Element 2</div>
 <div class="element">Element 3</div>
</div>
<style>
.container {
 display: flex;
 align-items: center; /* vertically center items */
 justify-content: center; /* horizontally center items */
 height: 300px; /* set the height of the container */
}
.element {
 background-color: #ccc;
 padding: 10px;
 margin: 10px;
}
</style>
```

In this example, the **container** div is set to use flexbox with the **display: flex** property. The **align-items: center** property centers the elements vertically, and the **justify-content: center** property centers them horizontally. The **height** property of the container is also set to a fixed height so that the container takes up a specific amount of space on the page.

## Using CSS Grid:

```html
<div class="container">
 <div class="element">Element 1</div>
 <div class="element">Element 2</div>
 <div class="element">Element 3</div>
</div>
<style>
.container {
 display: grid;
 place-items: center; /* vertically and horizontally center items */
 height: 300px; /* set the height of the container */
}
.element {
 background-color: #ccc;
 padding: 10px;
 margin: 10px;
}
</style>
```

In this example, the **container** div is set to use CSS grid with the **display: grid** property. The **place-items: center** property centers the elements both vertically and horizontally. The **height** property of the container is also set to a fixed height so that the container takes up a specific amount of space on the page.

You can adjust the height of the container, the number of elements, and the CSS styles as needed to customize the appearance of the vertically aligned elements.


---

Original Source: https://www.mindstick.com/forum/158037/how-can-i-vertically-align-elements-in-a-div

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