How to vertically align an image inside a div

In this article, I'll explain two methods you can use to vertically align an image inside a <div> container.

Using display:flex property.

To align an image vertically center inside a <div> container, we can use the display:flex property in combination with align-items:center on the parent <div>.

Demo of vertically center image

Try it Yourself »

1. Create a <div> element with a class named container. Inside the <div> element, create a <img> tag as a child element.
   

   <div class="container">
     <img src="https://stories.3schools.in/img/b.png">
   </div>

2. Set a width, height and also border to the <div> container using the css properties so that the container is visible.
   

   <style>
     .container {
       width: 200px;
       height: 200px;
       border: 2px solid black;
       }
   </style>
   <div class="container">
     <img src="https://stories.3schools.in/img/b.png">
   </div>

3. Make the <div> container flexible using the display:flex property. To center the image vertically, add the align-items:center property to the <div> container.
   

   <style>
     .container {
       width: 200px;
       height: 200px;
       border: 2px solid black;
       display: flex;
       align-items: center;
     }
   </style>
   <div class="container">
     <img src="https://stories.3schools.in/img/b.png">
   </div>

Center an image vertically using position property.

We can also use the css position property in combination with transform property to align an image vertically center inside a <div> container.

<style>
  .contain {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    position: relative;
  }
  .contain img {
    width: 60px;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
  }
</style>
<div class="contain">
  <img src="https://stories.3schools.in/img/b.png">
</div>

1. Set position:relative to the parent <div> container.
2. Set position:absolute to the <img> container so that we can move the image to left or right adding the top, bottom, left or right property.