How to Center an Image in CSS

1. Use the display and margin Properties to Center an Image in CSS
2. Use the text-align Property to Center an Image in CSS
3. Use the flexbox CSS Property to Center an Image

In this article, we will introduce three methods to center an image in HTML with the help of CSS.

Use the display and margin Properties to Center an Image in CSS

We can use the display and margin CSS properties together to center an image. The display property of the image is initially inline. Therefore, we can add several images in a line. For example, if we write the following code, we can see two images in a row.

<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" /> 

Therefore we have to change the display property of the image to block so that only one image is placed in a line. Then, we can give the image margin of 0px auto to center it. The image will have a 0px margin from the top and bottom. The first value can be any number, but the second value must be auto. The auto gives the image a margin which places it right at the center. This process only works if we have to center only one image in a row.

For example, create an HTML document and place an image using the img tag. Write the src value correctly and write an alt to make the image meaningful when the image is not shown due to some reason. Use the placeholder image https://loremflickr.com/320/240 in the src attribute. In CSS, set the display property to block and give it margin of 0px auto. The first value of margin is set to any number according to our requirement.

The example below shows that the image is centered as we set the display value to block and give it a margin of 0px auto.

Example Code:

<img src="/img/DelftStack/logo.png" alt="Logo" />

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

Use the text-align Property to Center an Image in CSS

We can use the text-align CSS property to center an image. We can wrap an image inside a div and set the text-align property to center, then the image will be centered. This method can center multiple images in a line, unlike the previous method that only centered one image. We can use this method both for single and multiple images.

For example, create a div and give it a class of parent. Then, inside the div, use the img tag to upload an image. Set src to https://loremflickr.com/320/240 and alt to cat. In CSS, select the div using its class name i.e .parent and set its text-align property to center.

The example below shows that the image inside the div is centered as we set the text-align CSS property of div as center.

Example Code:

<div class="parent">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.parent{
 text-align : center;
}

Use the flexbox CSS Property to Center an Image

Flexbox is one of the most widely used CSS technology. The main idea behind flexbox is to give the container the ability to alter its items. We can use the flexbox properties inside a container by setting the display property as flex. Then we can use the justify-content: center property to center the items or images inside the container horizontally. We can set the align-items property to center to center the items vertically.

For example, create a div and give it a class name of container. Then place an image inside the div using the img tag with src and alt. Select the div using its class name i.e .container and set its display property to flex. Then set the justify-content flexbox property to center.

The example below shows that the image inside the div is centered by using flexbox properties.

<div class="container">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.container{
 display: flex;
 justify-content: center;
}