Loading lesson path

CSS•Advanced Styling

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;.

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

Example

Horizontally centered image using margin: auto:

img {
display: block;
margin: auto;
width: 50%;
}

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

Formula

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

We add the following CSS to the div container:

Formula

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

Example

Horizontally centered image using display: flex:

div {
display: flex;
justify-content: center;
}
img {
width: 50%;
}

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;.

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)

Formula

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:

Example

True centering using display: flex:

div {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}

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)

Formula

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:

Example

True centering using display: grid:

div {
display: grid;
place-items: center;

height:

600px;
border: 1px solid black;
}
img {
width: 50%;
}

CSS Image Modal Code Challenge

CSS Image Centering Code Challenge

Loading lesson path

Learn/CSS/Advanced Styling

CSS•Advanced Styling

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;.

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

Example

Horizontally centered image using margin: auto:

img {
display: block;
margin: auto;
width: 50%;
}

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

Formula

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

We add the following CSS to the div container:

Formula

display: flex justify - content: center

Example

Horizontally centered image using display: flex:

div {
display: flex;
justify-content: center;
}
img {
width: 50%;
}

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;.

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)

Formula

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:

Example

True centering using display: flex:

div {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}

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)

Formula

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:

Example

True centering using display: grid:

div {
display: grid;
place-items: center;

height:

600px;
border: 1px solid black;
}
img {
width: 50%;
}

CSS Image Modal Code Challenge

CSS Image Centering Code Challenge