Center an image in a div vertically and horizontally

Last Updated : 29/06/2021

All most in every web project we need to make image center vertically and horizontally. In this post, we will learn four ways to make an image center in a div.

Center image vertically and horizontally

HTML center image in div

To make an image center in a div using HTML first of all we need to take a wrapping div and inside the wrapping div, we will keep our image.

<div id="image-container">
  <img src="https://via.placeholder.com/100x100" alt="">
</div>

Center image CSS

To center an image we need to use CSS, and there are different ways to make an image center. In this article, we will use the CSS.

Margin
Position
Line height

Properties to make an image center in the div.

CSS Center image horizontally

To make an image center horizontally in a div we will use the CSS text-align property in the wrapping div. We can also use the CSS margin property to our image to make it center horizontally.

Note: Our wrapping div should have fixed width.

CSS Center image horizontally uisng the css text-align property

#image-container{
  width:100%;
  text-align:center;
}

CSS Center image horizontally uisng the css margin property

#image-container{
  width:100%;
}
#image-container img{
  margin: 0px auto;
}

CSS center image vertically

To center an image vertically we can use CSS position property or CSS line-height property. We can also use CSS margin property technically to make an image center vertically in a div.

Center an image vertically using the CSS position property.

#image-container{
  width: 500px;
  height: 400px;
  border: 2px solid red;
  position: relative;
}
#image-container img{
  position:absolute;
  top:50%;
  transform:translate(0%,-50%);
}

Note: wrapping div should have a fixed width and height.

Center an image vertically using the CSS line-height property.

#image-container{
  width: 500px;
  height: 400px;
  border: 2px solid red;
  line-height: 500px; 
  text-align:center; 
}

Note: just use the same height and line-height in the wrapping div.

Center an image vertically using the CSS margin property.

#image-container{
  width: 500px;
  height: 400px;
  border: 2px solid red;
}
#image-container img{
   display:block;
   margin: calc(50% - 100px) 0px;
}

Note: we need to use the margin-top and margin-bottom using the CSS calc function.

Center image in div vertically and horizontally

We can make an image center vertically and horizontally using CSS position line-height and margin property.

Center image vertically and horizontally using line-height and text-align property.

#image-container{
  width: 500px;
  height: 400px;
  border: 2px solid red;
  line-height: 500px; 
  text-align:center; 
}

Center image vertically and horizontally using margin property.

#image-container{
  width: 500px;
  height: 400px;
  border: 2px solid red;
}
#image-container img{
   display:block;
   margin: calc(50% - 100px) auto;
}

Center image vertically and horizontally using position property.

#image-container{
  width: 500px;
  height: 400px;
  border: 2px solid red;
  position: relative;
}
#image-container img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}