Make center an image within a div on your website using CSS

This is a very common problem among web designers to implement images correctly inside a div, basically in order to make a responsive layout. Now I’m going to discuss image placement inside a div in a different way so that you can choose your best solution.

Different methods to align image center inside a div

1: Make image center in both horizontal and vertical ways by positioning

The following method will make the image center in both horizontal and vertical ways inside a div. You don't have to use separate code to make the horizontal and vertical alignment.

HTML:

<div class="image-align">
  <img src="https://torikulislam.com/upload/gallery/background-image.jpg">
</div>
<div class="image-align">
  <img src="https://torikulislam.com/upload/gallery/background-image-two.jpg">
</div>
<div class="image-align">
  <img src="https://torikulislam.com/upload/gallery/torikul-logo.png">
</div>

CSS:

 .image-align{ 
    float:left; 
    margin:5px;  
    height: 260px;
    width: 260px; 
    position: relative; 
    border:2px solid #03989e;
    }

.image-align img{    
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }

Result:

If you remove top: 0, the image will be turned to the bottom. The same thing happened when you also remove anyone's property of left: 0; right: 0; bottom:0. Do it as your necessity, and align the image in many more ways.

2: Do it for individual images

You can do it another way by changing img CSS property. This method is not much effective compared to before one. Use max-height and max-width 100% to control unwanted overflow, in case the image size is much bigger than a container. Let's use the images above for the following examples. 

For the first image:

.image-align img{ 
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
max-height: 100%;
max-width: 100%;
}

Result:

For the second image: Just add top:17%; to make a perfect alignment. 

Result:

For the third image: Just add top:40%; to make a perfect alignment.

Result:

3: Use transform property

If you like to make image center to a div using transform property, then you can follow the CSS code below: Let use the images above for the following examples. 

Center image vertically: To align vertically center you should use the following code. 

.image-align img{ 
position: relative;
left: 50%;
transform: translateX(-50%);
max-height: 100%;
max-width: 100%;
}

Result:

Center image horizontally: To make the image horizontally center, you can use the following code. 

.image-align img{	
  position: relative;
	top: 50%; 
	transform: translateY(-50%);
	max-height: 100%;
	max-width: 100%;
}

Result:

Center image horizontally and vertically: To make the image center in both ways simultaneously, you should use the following code.

.image-align img{ 
	position: relative;
	left: 40%; top: 50%;
	transform: translateY(-50%);
	max-height: 100%;
	max-width: 100%;
}

Result:

Frequently asked questions

Q: What is the responsive image?

Responsive image refers to an image that best fits with the website layout through any device. It makes the overall the best user experience and helps to grow the conversion rate. Conversion rate refers to user engagement.

How do I make an image responsive? 

By centering images inside an HTML container, you can make your image best fit all devices. There are many other ways like using bootstrap or defining custom CSS media.

Q: Responsive image how much affects website performance? 

It always makes a good impact on a website. It makes the user experience better in many ways. 

Responsive website design mostly depends on image structure. Because image size control is not as easy as any other content. So above mentioned strategies can make the image responsive inside the container, which looks good.

You can do it in many other ways as you like to do it yourself. The first method is the most preferred method of all, I think.