There’s multiple ways of to center an image in css, you can use Flexbox, Grid, and even center it as a background image. I will show you how to center elements very easily just follow along.

Center Image Horizontally

The simplest way to center an image horizontally is to make the parent element text aligned center

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png">
</div>
.container{
  height: 200px;
  width: 200px;
  background: black;
  text-align: center;
}
img{
  height: 50px;
  width: 50px;
}

Center Background Image

<div class="container">
  <div class="bgImage"></div>
</div>
.container{
  height: 200px;
  width: 200px;
  background: black;
  display: grid;
}
.bgImage{
  height:100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px 50px;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png);
}

Center Image Horizontally with CSS Flexbox

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png">
</div>
.container{
  height: 200px;
  width: 200px;
  background: black;
  display: flex;
  justify-content: center;
}
img{
  height: 50px;
  width: 50px;
}

Center Image Vertically with CSS Flexbox

Too center the image vertically all you need to do is add align-items center to the parent and if you have justify-content: center it will center the image right in the center of the container

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png">
</div>
.container{
  height: 200px;
  width: 200px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
img{
  height: 50px;
  width: 50px;
}

Center Image with CSS Grid Horizontally

Now I will show you how to center this image with css grid which is going to be super helpful if you are looking to center it within your layout.

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png">
</div>
.container{
  height: 200px;
  width: 200px;
  background: black;
  display: grid;
  justify-content: center;
}
img{
  height: 50px;
  width: 50px;
}

Center image with CSS Grid Vertically

Now if you want to vertically align an image or element just add an align-self: center; to the image or element that you want centered

.container{
  height: 200px;
  width: 200px;
  background: black;
  display: grid;
  justify-content: center;
}
img{
  height: 50px;
  width: 50px;
  align-self: center;
}

Conclusion

I hope you enjoyed this tutorial as you can see there are so many different ways you can center an image with CSS it’s up to you to choose one. Now if you want to learn how to code I recommend you sign up to CodingPhase and get access to over 40 programming courses for the price of $20 and if you sign up today you will get 50% off your first month. Check the courses.