How to center any image in HTML? All the ways to center HTML images

When you step into the world of web development and try your hands on HTML and CSS, you are likely to have come across this problem of centering images. In this article, we are going to dissolve this problem into 4 simple universal ways, which can center any image in any div ?

Let’s get started!

Using “margin: auto” property

The first method to center an image is by giving the left and right margins as auto. Now as the img element is an inline element, it becomes a little bit difficult to center directly. So you can convert the image to a block element and that’s what we do.

So from this:

You change the CSS of the image as:

img{
    /* give it a width you wish to */
    width: 60%;
    /* make the display as block */
    display: block;
    /* make the margin as follows */
    margin: 0 auto;
}
Code language: CSS (css)

That’s how it looks:

Using “text-align” property

Now how to use the text-align property, to center your image? You wrap the image in a block-level element like a div and give the div a text-align of center. This way will center an image only horizontally.

Wrap the image in a div like this:

Change the CSS as:

img{
    /* give image some width */
    width: 30%;
}
.wrapper{
    /* make the text-align as center */
    text-align: center;
}
Code language: CSS (css)

And this is how it looks:

Using grid property

This is actually quite similar to the text-align property which we used above. The only difference, we use CSS Grid here and it can center any image horizontally and vertically.

So you wrap the img element with a div like:

Then you modify the CSS of the div as:

img{
    /* give image some width */
    width: 50%;
}
.wrapper{
    /* make the display as grid */
    display: grid;
    /* use the place items property */
    place-items: center;
}
Code language: CSS (css)

Using CSS Flexbox

The advent of CSS Flexbox made it easier to center anything. Flexbox works via putting what you want to center in a div and giving the div a display of flex. Then set justify-content to center. But this actually will only center it horizontally. To center it vertically, we need to add the property align-items as center.

So you wrap the img element as:

Adding the justify-content property:

img{
    /* give image some width */
    height: 50%;
}
.wrapper{
    /* make the display as flex */
    display: flex;
    /* use the justify-content property */
    justify-content: center;
    /* border and height to show how it centers horizontally and verically */
    border: 1px solid red;
    height: 50%;
}
Code language: CSS (css)

This is how it appears:

Now to make it center vertically, we add the align-items: center property like:

img{
    /* give image some width */
    height: 50%;
}
.wrapper{
    /* make the display as flex */
    display: flex;
    /* use the place items property */
    justify-content: center;
    /* align items property */
    align-items: center;
    /* border and height to show how it centers horizontally and verically */
    border: 1px solid red;
    height: 50%;
}
Code language: CSS (css)

Now it looks like:

So now you can flex (pun intended ?) to your friends that you know how to center an image.

Conclusion

So in this article, we learned how to transition from a newbie developer to an amateur developer, by understanding all the ways to center any image.

Thanks for reading ?

For more such informative content, do check out: codedamn blog