Heapcoding

Need web development help/service?

Hire me: umar.bwn@gmail.com

How to put an image in the center in CSS

Published July 13, 2022

In this tutorial I shall show you how to put an image in the center in CSS. Let’s start the tutorial without wasting your time.

Step 1 – Create a basic HTML document

First of all, create a basic html document.

How to center an image in html using CSS
how to put an image in the center in css

In the above screenshot you can see. I have created a basic HTML document, with two basic tags “head” and “body”.

Step 2 – Add image to the document

How to center an image in html using CSS

In the above screenshot you can see I have added an image in the document. Now let’s see how it looks in the web browser.

How to center an image in html using CSS

In the above screenshot you can see the image looks fine and rendered in the web browser.

Step 3 – Center the image using CSS

How to center an image in html using CSS

In the above screenshot you can see I have added some CSS properties to the body. And let’s describe all of them.

  • “min-height: 100vh” this property will set the minimum height to the current window height of the document.
  • “display: flex” This is the CSS3 property which will set display to flex so that we could align the child elements. This time the child element is the image.
  • “align-items: center” This property will align items vertically center.
  • “justify-content: center” This property will align the items horizontally center.

Now let’s see the results in the web browser.

How to center an image in html using CSS

In the above screenshot you can see the image is now center aligned vertically and horizontally.

Congratulations you have learned how to put an image in the center in css.