How to Center an Image in HTML?

You can center an image either vertically or horizontally or both. Depending on requirement, the solution is different. Find your necessary solution below-

Problem:

You’re looking for a pure HTML solution (no CSS) to center an image in the webpage.

Solution:

In short, according to the current HTML5 standard, you can’t get a pure HTML solution to center an image as centering an image is presentational part and you’ll need CSS to handle that part now. But, previously there were two pure HTML solutions. Let’s check them-

Method 1 (Deprecated): Using <center> tag

The <center> tag centers its content horizontally. So, you could center an image like this-

<center>
	<img src="sample4.png" />
</center>

Method 2 (Deprecated): Using align attribute

In this method, the image was surrounded by a block level element like <div> or <p> and the data (here image) inside the div was aligned in the center horizontally using the align attribute as value “middle”. See the example below-

<div align="middle">
              <img src="image.png" />
</div>

Caution: Though, some browsers may still support the above two methods, don’t use them. They are not standard anymore and browser support could be stopped anytime.

Problem:

You want to center an image horizontally.

Solution:

There are few ways to accomplish it. Let’s check the methods-

Method 1: Using CSS text-align property

You can use CSS’s text-align property with “center” as value to center an image. See the code below-

<div style="text-align: center;">
	<img src="image.png" />
</div>

Explanation: When applying text-align property in a block level element (here, the div in line 1) it will align inline-level content (here, the image in line 2) inside it. So, the property value “center” will center the image inside the div horizontally.

Note: This method will work if the image is smaller or equal to its container.

Method 2: Using CSS’s margin property

You can use CSS’s text-align property with “center” as value to center an image. See the code below-

<img src="image.png" style=”display: block; margin-left: auto; margin-right: auto;” />

Explanation: The img is an inline element. We can convert it to block element so that it takes the full width of its container. Then, we can center it horizontally applying left and right margin to auto.

Note: This method will work if the image is smaller or equal to its block level container.

Method 3: Using CSS flexbox layout

Using CSS flexbox layout module, you can center image(s) horizontally perfectly and easily. Se the code below-

<div style="display:flex; justify-content: center; ">
	<img src="image.png">
</div>

Explanation: When you define a container as flex (which is called flex container), it can fill the available space inside efficiently to align its items (which is called flex items). So, by display:flex, you define the div as a flexbox container and by justify-content: center, you center the flex items (here the image) horizontally.

Problem:

You want to center an image vertically.

Solution:

There are few solutions to it. Let’s check the methods one by one-

Method 1: Using CSS flexbox layout

Using CSS flexbox layout module, you can center image(s) vertically. See the code below-

<div style="display:flex; align-items: center; height: 200px; ">
	<img src="image.png">
</div>

Explanation: You already know how flexbox layout works from the above example. By align-items: center, you center the flex items (here the image) vertically (line 1).

Problem:

You want to center an image both horizontally and vertically.

Solution:

There are few solutions. Let’s check the methods them-

Method 1: Using CSS flexbox layout In the above two examples, you’ve seen how to center an image horizontally and vertically separately. If you combine them, you can center it both horizontally and vertically at a time. See the example-

<div style="display: flex; height: 200px; justify-content: center; align-items: center;">
	<img src="image.png" />
</div>

Method 2: Using CSS position and transform properties

With CSS position properties, you can position an image in the center. See the HTML code below-

<div class="container">
	<img src="image.png" class="centerImage" />
</div>

And, the CSS code-

.container {
	position: relative;
	height: 200px;
	width:40%;
}
.centerImage {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

Explanation: Every single webpage element is a block whether it is an inline element or a block level element and each one has a position on the webpage. The default position of every element is static which ensures normal flow of the elements (for this, you see the elements on the webpage as you see them). You can control the location of each element with these four properties – top, right, bottom, and left.

You can control an absolute position child by its relative position parent. And, you’ll apply this trick to center an image. This is why you include the image as a child inside the div (see the HTML code line 1-3) and set the div position as relative (line 2) and image as absolute (line 7). Then, top: 50% (line 8) and left 50% (line 9) will center the image inside the div. but, it partially moves outside the div.

So, you’ll use CSS transform property to change the position of the image element. One of its value is translate() method which repositions an element in the horizontal and vertical direction. The first argument of the translate() method moves an element horizontally and the second argument moves vertically. The positive argument moves an element right or down. And, the negative argument moves left or up. Use according to your requirement. In the example above, we moved image left and top (line 10 and 11).