CSSCentering Images

Centering Images

With CSS, you can center images with several methods.

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

Center an Image Horizontally

To display a horizontally centered image, we can usemargin: auto; ordisplay: flex;.

1. Using margin: auto

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

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

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

Here is a horizontally centered image usingmargin: auto:

2. Using display: flex

Another way to center an image horizontally on a page is to usedisplay: 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 awidth for the image. The width of the image must be smaller than the width of the page.

Here is a horizontally centered image usingdisplay: flex:

Vertical and Horizontal Centering

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

1. Using display: flex

To display an image that is both vertically and horizontally centered withflexbox, 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 awidth for the image (must be smaller than the width of the container).

Here is a vertically and horizontally centered image with flexbox:

2. Using display: grid

To display an image that is both vertically and horizontally centered withgrid, 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 awidth for the image (must be smaller than the width of the container).

Here is a vertically and horizontally centered image with grid: