---
title: "Align image in middle (vertical) of a div with css"  
description: "Align image in middle (vertical) of a div with css"  
author: "Utpal Vishwas"  
published: 2023-04-25  
updated: 2023-04-26  
canonical: https://www.mindstick.com/forum/158021/align-image-in-middle-vertical-of-a-div-with-css  
category: "css-css3"  
tags: ["html", "css", "css position"]  
reading_time: 1 minute  

---

# Align image in middle (vertical) of a div with css

Align [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) in middle ([vertical](https://www.mindstick.com/forum/12951/how-to-fix-bootstrap-tab-vertical-with-text)) of a div with [css](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem)

## Replies

### Reply by Aryan Kumar

To align an image vertically in the middle of a div with CSS, you can use the `**display**` and `**align-items**` properties.

Here's an example:

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-width: 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-width: 100%**` property on the image ensures that the image scales properly with the container.


---

Original Source: https://www.mindstick.com/forum/158021/align-image-in-middle-vertical-of-a-div-with-css

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