CSS Centering 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 use margin: auto; or display: flex;.

1. Using margin: auto

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:

2. Using display: flex

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:

Vertical and Horizontal Centering

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

1. Using display: flex

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:

2. Using display: grid

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: