How to center images in CSS?

CSS helps us to control the display of images in web applications. The centering of images or texts is a common task in CSS. To center an image, we have to set the value of margin-left and margin-right to auto and make it a block element by using the display: block; property.

If the image is in the div element, then we can use the text-align: center; property for aligning the image to center in the div.

The <img> element is said to be an inline element that can easily be centered by applying the text-align: center; property of CSS to the parent element that contains it.

Note: The image cannot be centered if the width is set to 100% (full-width).

We can use the shorthand property margin and set it to auto for aligning the image at the center, rather than using the margin-left and margin-right property.

Let's see how to center an image by applying text-align: center; property to its parent element.

Example

In this example, we are aligning the images by using the text-align: center; property. The image is in the div element.

Output

Example

Now, we are using the margin-left: auto; margin-right: auto; and display: block; properties for aligning the image to the center.

Output