How to center an image using text-align center with CSS?

To center an image using text-align center with CSS, we set the margin.

For instance, we write

<div style="border: 1px solid black">
  <img class="center" src="https://picsum.photos/300/300" />
</div>

to add a div with an image.

Then we write

img.center {
  display: block;
  margin: 0 auto;
}

to center the image with margin: 0 auto;.