How to vertically align an image inside a div with CSS?

Sometimes, we want to vertically align an image inside a div with CSS.

We’ll look at how to vertically align an image inside a div with CSS, in this article.

How to vertically align an image inside a div with CSS?

First we flexbox, to vertically align an image inside a div with CSS .

For instance, we can write

<div class="parent">
  <img class="child" src="https://picsum.photos/300/300" />
</div>

to add a div with an img element inside.

Then we can write

.parent {
  align-items: center;
  background: red;
  display: flex;
  height: 250px;
  width: 250px;
}

to make the div a flex container with display: flex;.

Then we vertically center the img element with align-items: center;.

Conclusion

Then we use flexbox, to vertically align an image inside a div with CSS.