How to Center an Image Vertically and Horizontally using Css

Are you wondering how to center an image vertically and horizontally using CSS?

Don't worry! Centering an image using CSS is really easy and in this article, I will try to explain how you can do it.

Live Demo

Try it Yourself »

Center an image using display property.

We put the <img> inside a <div> element as a child element, so that we can add the display property to the parent element <div> .

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

To center an image using display property, we need to add display property with its value flex to the parent element <div>.

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

Now, to center the image horizontally, we have to add the justify-content property with its value set to center.

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

Using the align-items property with its value center, we can center the image horizontally.

To display the image at the center of the <div> element horizontally and vertically, add the both properties.

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

Center images using css position property.

We can add position property with its value relative to the parent element <div>. Add the position property with its value absolute to the child element <img>. Finally, set the margin of the <img> element to auto.

Center images using position property

Try it Yourself »

1. Add position property with its value set to relative to the parent element <div>.
   

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

2. Set position:absolute to the child element <img>.To center the image vertically, add left, right properties with their values set to 0 to the child element <img>. [Don't forget to add margin:auto]
   

   <style>
     .container {
       width: 200px;
       height: 200px;
       border: 2px solid black;
       position: relative;
     }
     .container img {
       width: 60px;
       position: absolute;
       left: 0;
       right: 0;
       margin:auto;
     }
   </style>
   <div class="container">
     <img src="https://stories.3schools.in/img/b.png">
   </div>

3. To center the image vertically, add top, bottom properties with their values set to 0 to the child element <img>.
   

   <style>
     .container {
       width: 200px;
       height: 200px;
       border: 2px solid black;
       position: relative;
     }
     .container img {
       width: 60px;
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin:auto;
     }
   </style>
   <div class="container">
     <img src="https://stories.3schools.in/img/b.png">
   </div>
   Try it Yourself »

Conclusion

In this article, I have explained two methods. Both of these will align an image to the center of the parent element.