How to center an image in HTML

Centering an image in HTML is a little harder than centering text as there’s no single CSS property that you could use to make sure your image appears at the center of the web page.

That said, let’s start with a simple HTML that has an image in it:

<img src="https://learn.coderslang.com/grid-en.png">

Now, let’s create a CSS class .center in one of your linked CSS files:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

And eventually add the .center CSS class to the img HTML tag to align our image centrally.

<img src="https://learn.coderslang.com/grid-en.png" class="center">