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.

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
}
img{
height: 300px;
width: 300px;
}
#center {
text-align: center;
}
</style>
</head>
<body>
<div id ="center">
<img src="lion.png">
</div>
</body>
</html>

Test it Now

Output

Example

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

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightblue;
}
#image {
display: block;
margin-left: auto;
margin-right: auto;
border: 8px ridge blue;
padding: 5px;
}
</style>
</head>
<body>
<img src = "lion.png" id ="image" width="300" height="300">
</body>
</html>

Test it Now

Output