CSS – How to Center Image in div?

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 :-

• 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 :-

• 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.

Summary

In this way, we have covered multiple tricks to center the image in div using CSS.

In method 1, we have used the margin property of CSS & set the margins to auto.

In method 2, we have demonstrated How to place & center the logo image within a div.

In method 3, we have used the position attribute of CSS to relative & absolute.