CSS

CSS – How to Center Image in div?

Spread the love

In this article, we will focus on How to center image in div through CSS.

We will learn multiple different methods to make the image centered in the div element by using various CSS properties.

Let’s check this pratically by diving into the code.

Method 1 – How to center image in div in CSS?
Method 2 – How do I center a logo in a div CSS?
Method 3 – How do I center an image in a div with position absolute?
Summary

Method 1 – How to center image in div in CSS?

To center an image in a div in CSS, we use the margin property of CSS & set the margins to auto.

When we apply margins to auto then the image element will be auto centered within the parent element.

margin auto will work not only for images but also for other elements as well.

CSS :-

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

HTML :-

	<div style="border: 1px solid black;">
	   <img class="img-center" src ="./smile.jpg">
	</div>

Result :-

How to center image in div in CSS

In the CSS code section, we have created a class style with display property set to block. Then we applied the margin to 0 auto. This will set the image to the center.
In the HTML code section, We have placed the image tag within the div element.
In the result image, we can see the image as centered aligned within the div.

Method 2 – How do I center a logo in a div CSS?

In a website, one logo is always needed to make a unique identification of the site.

Logo is commonly placed in the top left corner in the top section of the site.

In this method, we will demonstrate How to center a logo in the top left corner.

CSS :-

	.img-center {
	   width: 100px;
	   display: block;
	   margin: 0 auto;
	}

HTML :-

	<div style="width: 100%; border: solid 1px blue;">
	   <div style="width: 300px; border: solid 1px red;">
		 <img class="img-center" src ="./smile.jpg">
	   </div>
	</div>

Result :-

In the CSS code section, we have created the samme class style with display property set to block & margin set to 0 auto.
In the HTML code section, we have the parent div element & it is the main banner placeholder. We have another child div within the parent div that has a limited width. Image is placed within this child div.
In the result image, we can see the logo image as centered aligned within the top left corner of the page.

Method 3 – How do I center an image in a div with position absolute?

Image can be centered in a div by using the position attribute of CSS.

In this method, we set the outer div to position relative & the image within this div will be applied to the position absolute.

With the help of absolute position, we can move the image easily to top, right, bottom or left.

CSS :-

	.img-center {
	   position: absolute;
	   left: 0;
	   right: 0;
	   top: 0;
	   bottom: 0;
	   margin: auto;
	   width: 100px;
	}

HTML :-

	<div style="position: relative; width: 300px; height: 200px; border: solid 1px blue;">
	   <img class="img-center" src ="./smile.jpg">
	</div>

Result :-

center an image in a div with position absolute

In the CSS code section, we are using position absolute property to the image. The margin is set to auto whereas top, right, bottom & left properties are set to 0.
In the HTML code section, We have a parent div with position set as relative. The image is placed within the div & it has been applied to the CSS class that will do the work of center aligning the image.
In the result image, we can see the image as center aligned within the div element.