---
title: "How to vertically align an image inside a div"  
description: "How to vertically align an image inside a div"  
author: "Utpal Vishwas"  
published: 2023-04-25  
updated: 2023-04-26  
canonical: https://www.mindstick.com/forum/158019/how-to-vertically-align-an-image-inside-a-div  
category: "html"  
tags: ["html", "css", "css position"]  
reading_time: 2 minutes  

---

# How to vertically align an image inside a div

How to [vertically align](https://www.mindstick.com/forum/159390/how-do-i-vertically-align-text-in-a-div-please-provide-sample) an [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) inside a div

## Replies

### Reply by Aryan Kumar

To vertically align an image inside a div, you can use CSS flexbox or CSS table display properties.

Here's how to do it using CSS flexbox:

HTML:

```html
<div class="container">
 <img src="your-image.jpg" alt="Your Image">
</div>
```

CSS:

```css
.container {
 display: flex;
 align-items: center;
 justify-content: center; /* optional */
 height: 400px; /* set the height of the container */
}
.container img {
 max-height: 100%;
}
```

In the example above, the **display: flex** property is used to create a flex container, and **align-items: center** is used to vertically align the image in the middle of the container.

If you want to horizontally center the image as well, you can use **justify-content: center**. Note that this property centers the contents horizontally, but only works if there is extra space in the container.

The **height** property of the container is set to a specific value to create a fixed height for the container. If you want the container to be flexible, you can remove this property.

The **max-height: 100%** property on the image ensures that the image scales properly with the container.


---

Original Source: https://www.mindstick.com/forum/158019/how-to-vertically-align-an-image-inside-a-div

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