The easiest way to center an image in HTML is to use CSS:
<img src="image.jpg" alt="Example" style="display: block; margin: 0 auto;">
This centers the image horizontally. The display: block makes the image a block-level element, while margin: 0 auto automatically distributes equal space on the left and right.
There are several ways to center an image, depending on how your page is structured.
1. Center an image with margin: auto
For a simple image, this is one of the most useful methods:
<div>
<img src="image.jpg" alt="Example" style="display: block; margin: 0 auto;">
</div>
The important part is:
img {
display: block;
margin: 0 auto;
}
The image must have display: block for this method to work reliably. The automatic left and right margins then center the image within its available container.
2. Center an image with text-align: center
You can also center an image by applying text-align: center to its parent element:
<div style="text-align: center;">
<img src="image.jpg" alt="Example">
</div>
This works because an image is treated as inline content by default. The parent container centers its inline content.
You can also use CSS:
.image-container {
text-align: center;
}
<div class="image-container">
<img src="image.jpg" alt="Example">
</div>
This method is particularly convenient when you already have a container around the image.
3. Center an image with Flexbox
Flexbox is useful when you want more control over the layout:
<div class="image-container">
<img src="image.jpg" alt="Example">
</div>
.image-container {
display: flex;
justify-content: center;
}
justify-content: center centers the image horizontally.
To center the image both horizontally and vertically, use:
.image-container {
display: flex;
justify-content: center;
align-items: center;
}
The container needs a defined height if you want vertical centering to be visible.
4. Center an image with CSS Grid
CSS Grid provides another simple solution:
<div class="image-container">
<img src="image.jpg" alt="Example">
</div>
.image-container {
display: grid;
place-items: center;
}
place-items: center centers the image horizontally and vertically within the grid container.
5. Center an image horizontally and keep it responsive
For a responsive website, you can combine centering with a maximum width:
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
This centers the image while preventing it from becoming wider than its parent container.
max-width: 100% allows the image to shrink on smaller screens, while height: auto keeps the original aspect ratio.
Which method should you use?
For a single image that simply needs to be centered, this is usually enough:
<img src="image.jpg" alt="Example" style="display: block; margin: 0 auto;">
For an image inside an existing content container, text-align: center is also simple:
<div style="text-align: center;">
<img src="image.jpg" alt="Example">
</div>
For more complex layouts, use Flexbox or Grid.
Do not use the old HTML <center> tag:
<center>
<img src="image.jpg" alt="Example">
</center>
The <center> element is obsolete. CSS should be used for alignment instead.
Final answer
To center an image horizontally in HTML, use:
img {
display: block;
margin: 0 auto;
}
Or, if the image is inside a container:
.container {
text-align: center;
}
For modern layouts, Flexbox and CSS Grid are also excellent options. The best method depends on whether you are centering only the image or controlling a larger page layout.
More Related Guide
How Do You Indent In Html
How Long Does It Take To Learn Html
How To Convert Html To Excel
How To Embed A Google Form In Html
How To Get Html Code From A Website
How To Hide Text In Html
What Are Tags In Websites
What Does Hr Stand For In Html
What Is The Difference Between Css And Html
How To Add An Image From A Folder In Html
How To Add Expires Headers In Html Catswhocode
How To Copy Html Code From A Website
How To Create A Banner In Html
