Use the following steps to **center align** an image in the middle of a div container:

1. Create a div container.
2. Insert the image tag in order to tell the source of the image.
3. In the CSS, set the left and right margins to `auto`.
4. Change the display to `block`.

The image should now be center aligned.

Below is a working code example you can use to better understand the concept:


<html>
  <head>
    <style>
      img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="https://www.educative.io/api/edpresso/shot/6125735109459968/image/5396753205952512"/>
    </div>
  </body>
</html>

codemirror

How to align an image in the center of div

Center align an image in a div using CSS by setting margins to auto and display to block.