How to center image within a div? (CSS Responsive Image)

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.

align image inside a div

Different methods to align image center inside a div

Method 1: Make image center in both horizontal and vertical way by positioning
Method 2: Do it for individual images
Method 3: Use transform property

Method 1: Make image center in both horizontal and vertical way 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:

Image alignment in different ways using CSS (Horizontally & Vertically))

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

Method 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 image size is much bigger than a container. Let 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:

Vertically image alignment center using CSS

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

Result:

Horizontally image alignment center using CSS

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

Result:

Horizontally & Vertically image alignment center using CSS

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

Vertically image alignment center using CSS

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:

Horizontally image alignment center using CSS

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:

Horizontally & Vertically image alignment center using CSS


Frequently asked questions

What is the responsive image?

Responsive image refers to an image that best fits with website layout through any device. It makes the overall the best user experience and helps to grow 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 with all devices. There are many other ways like using bootstrap or defining custom CSS media.

Responsive image how much affects on 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 so 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 yourself. The first method is the most preferred method of all, I think. If you have any questions, you are always welcome to use my comment box below.

Also Read:

HTML element align to center using CSS