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

Question

Aryan Kumar · Answer

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:

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

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.

forum

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

Can you answer this question?

1 Answers