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.
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
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.
In the above screenshot you can see the image looks fine and rendered in the web browser.
Step 3 – Center the image 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.
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.