CSS Centering Images

With CSS, you can center images with several methods.

An image can be centered horizontally, vertically, or both.

To display a horizontally centered image, we can use margin: auto; or display: flex; .

One way to center an image horizontally on a page is to use margin: auto .

Since the <img> element is an inline element by default (and margin: auto does not have any effect on inline elements) we must convert the image to a block element, with display: block .

In addition, we have to define a width . The width of the image must be smaller than the width of the page.

Here is a horizontally centered image using margin: auto :

Another way to center an image horizontally on a page is to use display: flex .

Here, we put the <img> element inside a <div> container.

We add the following CSS to the div container:

• display: flex
• justify-content: center (centers the image horizontally in the div container)

Then, we set a width for the image. The width of the image must be smaller than the width of the page.

Here is a horizontally centered image using display: flex :

To display an image that is both vertically and horizontally centered (true centering), we can use display: flex; or display: grid; .

To display an image that is both vertically and horizontally centered with flexbox , we use a combination of:

• display: flex;
• justify-content: center; (centers the image horizontally in the container)
• align-items: center; (centers the image vertically in the container)
• height: 600px; (the height of the container)

Here, we also put the <img> element inside a <div> container.

Then, we set a width for the image (must be smaller than the width of the container).

Here is a vertically and horizontally centered image with flexbox:

To display an image that is both vertically and horizontally centered with grid , we use a combination of:

• display: grid;
• place-items: center; (centers the image horizontally and vertically in the container)
• height: 600px; (the height of the container)

Here, we also put the <img> element inside a <div> container.

Then, we set a width for the image (must be smaller than the width of the container).

Here is a vertically and horizontally centered image with grid: