How to Center an Image in CSS (with Example)

Hello guys, in this post you are going to learn how to center an image in CSS. So if you are learning CSS and building projects in it you may reach a situation where you need to center your image inside another element.

If you are thinking that you are the only person who is dealing with this situation, then you are wrong my friend. We have all ended up in these types of situations while learning CSS, where we googled these types of questions like you.

So now that you understood that these situations are part of our learning journey, let’s just come back to the situation we will learn to deal with in this post. So centering of images can be done by different methods and we are going to discuss them all in this post with examples.

But first, you need to understand that img is an inline element which a little hard to center, but we will center it by converting img it from an inline to a block-level element with the help of CSS.

So now let’s understand different ways of centering an image.

Different ways to Center an Image in CSS

How to center an image using flexbox

Flexbox is a CSS layout module that is used to align and distribute space among items in a container. It is widely used by front-end developers to align-items on a web page.

Using flexbox we can simply center an image both horizontally and vertically as shown in the below example.

HTML

<div>
   <img src="logo.png" width="100" height="100">
</div>

CSS

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

Output

How to center an image using Text align property

Text align property is generally used to align block-level elements. But as you know that img is an inline element so to align it using the property text-align: center; we first need to convert it into block level element then we can easily center it using the text-align property.

How to center an image using CSS Grid

CSS grid is another layout module offered by CSS to align elements using a grid-based layout system. CSS grid is considered as one most easy ways to align anything by writing fewer CSS properties

HTML

<div>
   <img src="logo.png" width="100" height="100">
</div>

CSS

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

Output

How to center an image using the Margin property

The margin property is generally used to create space outside of an element, But we can use it to horizontally align any block-level element.

To center an image using the margin property we first need to convert img to a block-level element and then we can center it using margin: 0 auto;

HTML

<div>
   <img src="logo.png" width="100" height="100">
</div>

CSS

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

Output

How to center an image using the position property

We can also center our images vertically and horizontally using the CSS position property. But there is a disadvantage to using the position property. For centering an image or any other element you need to write 4 to 5 lines of CSS code whereas in CSS grid and flexbox we can do the same thing in just 2 to 3 lines.

HTML

<div>
   <img src="logo.png" width="100" height="100">
</div>

CSS

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Output

Congratulations, now you know how to center an image in CSS using multiple ways. I Hope you understood the complete tutorial, if you still have any doubts left in your mind then please do ask in the comment section below.

.