If you're making websites with HTML and CSS, you will be working with images a lot.

Developers often struggle with image alignment in CSS, especially when trying to figure out how to center an image.

Centering anything in CSS is not really a straightforward thing - especially for beginners. This is why people brag about being able to center a div. :)

Since the img element is an inline element, this makes it a little bit harder to center. But don't worry, you can convert the image to a block element and then center it.

In this article, I'm going to show you 4 different ways you can align an image to the center.

Table of Contents

How to Center an Image With the Text Align Property

You can center an image with the text-align property.

One thing you should know is that the tag for bringing in images – img – is an inline element. Centering with the text-align property works for block-level elements only.

So how do you center an image with the text-align property? You wrap the image in a block-level element like a div and give the div a text-align of center.

<div>
    <img src="fcc22.png" alt="freeCodeCamp" />
</div>

div {
      text-align: center;
    }

ss-1

How to Center an Image with Flexbox

The introduction of CSS Flexbox made it easier to center anything.

Flexbox works by putting what you want to center in a container and giving the container a display of flex. Then it sets justify-content to center as shown in the code snippet below:

  div {
      display: flex;
      justify-content: center;
    }

ss-1

P.S.: A justify-content property set to center centers an image horizontally. To center the image vertically too, you need to set align-itemsto center.

How to Center an Image with CSS Grid

CSS Grid works like Flexbox, with the added advantage that Grid is multidimensional, as opposed to Flexbox which is 2-dimensional.

To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid. Then set the place-items property to center. 

 div {
      display: grid;
      place-items: center;
    }

ss-1

P.S.:place-items with a value of center centers anything horizontally and vertically.

How to Center an Image with the Margin Property

You can also center an image by setting a left and right margin of auto for it. But just like the text-align property, margin works for block-level elements only.

So, what you need to do is convert the image to a block-level element first by giving it a display of block.

img {
      display: block;
      margin: 0 auto;
    }

Those 2 properties could be enough. But sometimes, you have to set a width for the image, so the left and right margin of auto would have spaces to take.

 img {
      display: block;
      margin: 0 auto;
      width: 40%;
    }

ss-2

P.S.: You might not have to go as low as 40% for the width. The image was distorted at a 60+ percentage, that’s why I went as low as 40%.

I hope this article helps you choose which method works best for you in centering an image.

Thank you for reading.