How to center an image horizontally within a div with CSS?

Somewtimees, we want to center an image horizontally within a div with CSS.

In this article, we’ll look at how to center an image horizontally within a div with CSS.

How to center an image horizontally within a div with CSS?

To center an image horizontally within a div with CSS, we use flexbox.

For instance, we write

<div style="border: 1px solid red">
  <img
    src="https://picsum.photos/200/300"
    alt=""
    srcset=""
    style="
      border-radius: 50%;
      height: 7.5rem;
      width: 7.5rem;
      object-fit: contain;
    "
  />
</div>

to add a div with an image inside.

Then we write

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

div img {
  object-fit: contain;
}

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

Then we center the contents inside horizontally and vertically with justify-content: center; and align-items: center; respectively.

And then we make the img element fit in the container with object-fit: contain;.

Conclusion

To center an image horizontally within a div with CSS, we use flexbox.