How to Center an Image in HTML?
Last Updated :
21 May, 2025
To Center an image in HTML is a common task in web design, and there are several modern ways to do it using CSS. While the old <center> tag was once popular, it's now deprecated in HTML5. Today, nearly 80% of websites use CSS techniques like text-align, margin: auto, or flexbox to center images either horizontally, vertically, or both. In this article, you'll learn the best methods to center an image in a clean, modern way using HTML and CSS.
Horizontally Center an Image using CSS
1. Using text-align Property
The text-align property in CSS is used to center an image within a container element. By wrapping the image inside a div and applying text-align: center; to the container, the image gets aligned to the center of the page horizontally.
Example: Center an image using a container div with the text-align: center; CSS property.
index.html
<div style="text-align: center;">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png" alt="HTML Image">
</div>
<p>
The text-align property in CSS controls the
horizontal alignment of inline content
(such as text) and inline-block elements
within their containing block-level element.
</p>
Output:
use text align-property2. Using CSS margin Property
To center an image is by using the margin property, you need to set the left and right margins of the image to auto. This works when the image as a block element. The browser will automatically adjust the space on either side to center it.
Example: In this example, we set image margin left & right to auto to center the image horizontally within its containing block.
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png" alt="HTML Image" class="center">
<p>
CSS Margin is the space outside an element, separating it from other elements. It adds space around an element, affecting its positioning and creating gaps between other elements.
</p>
</body>
</html>
Output:
using margin: autoVertically Center an Image using CSS Flexbox
Vertically center an image can be more challenging than horizontal centering, but with modern CSS techniques like Flexbox and CSS Grid, it’s become easier and more flexible. Flexbox provides a more flexible way to center elements both horizontally and vertically. The container is made a flex container with display: flex.
Example: The align-items: center; place the image to centers vertically. The height: 100vh; style ensures the container takes up the full viewport height.
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center; /* Vertical center */
justify-content: center; /* Optional: Horizontal center */
height: 100vh; /* Full viewport height */
background-color: #f0f0f0;
}
img {
max-width: 200px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png" alt="Centered Image">
</div>
</body>
</html>
Output:
Vertically center an Image
Note: In above code, we can use justify-content: center; to align image Horizontally.
Center an Image Horizontally & Vertically using CSS Grid Layout
CSS Grid Layout provides another way to center elements both horizontally and vertically. The container is made a grid container with display: grid;.
Syntax:
image_container {
display: grid;
place-items: center;
height: 100vh;
}Example: The place-items: center; style centers the image both horizontally and vertically within the grid. The height: 100vh; style ensures the container takes up the full viewport height.
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.center{
display: grid;
place-items: center; /* Center both horizontally and vertically */
height: 100vh; /* Full viewport height */
}
</style>
</head>
<body>
<div class="center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png" alt="HTML Image">
</div>
</body>
</html>
Output:
center both vertically & horizontally
Similar Reads
How to Create an Image Map in HTML ?
An image map is a graphical representation that allows you to define clickable areas (or "hotspots") within an image. Each hotspot can be associated with a hyperlink, making different parts of the image interactive. Image maps are commonly used for navigation menus, interactive diagrams, and geograp
2 min read
How to Center an Image in CSS?
To center an image in CSS, we will align the image to the container horizontally and vertically as the layout requires.Center Images Horizontally1. Using text-align PropertyThe simplest way to center an image horizontally within a block-level container is to use the text-align property. This method
3 min read
How to align Image in HTML?
Aligning images within a webpage is an essential part of web design. It allows you to control how images are positioned about surrounding content. In HTML, there are several ways to align images using both attributes and CSS techniques, ranging from simple alignment to more advanced responsive layou
4 min read
How to Center a Video in HTML ?
Centering a video in HTML enhances the user interface, offering a cleaner and more organized appearance. We can achieve this effect with two different methods, by using the Flexbox and the "style" attribute. Below are the approaches to Center a Video in HTML: Table of Content Using the FlexboxUsing
2 min read
How to Resize an Image in HTML?
Images are a vital part of any webpage, enhancing the visual appeal and improving user engagement. However, displaying images at the correct size is essential for a professional look and optimal page performance. Resizing an image in HTML ensures that it fits within your webpage's design while maint
2 min read
How To Change Image Size In HTML?
To change the size of an image in HTML, you can use width and height attribute within <img> tag. Alternatively, we can use CSS properties to set or change the image size. Change image size feature is useful while developing a responsive web page.Table of ContentUsing HTML width and height Attr
3 min read
How to Insert an Image in HTML?
To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method
1 min read
How to Arrange Images and Text in HTML?
In HTML, arranging images and text is essential for creating visually appealing and readable web pages. We can position images in various ways to achieve the desired layout, including the inline with text, above, below, or beside it. Understanding how to align and arrange these elements helps to enh
5 min read
How to Center Text in HTML?
To center text in HTML, we can use CSS text-align: center property. It aligns the text to center horizontally. The <center> tag was used in older versions to center the text horizontally, but it is depreciated in HTML 5.Center Text using center TagThe <center> tag is a block-level elemen
1 min read
How to Center Form in HTML?
In HTML, forms are typically displayed as a block element, taking up the full width of their container. While this is often desirable, there are times when you might want to center a form within its container for aesthetic or layout purposes. We will discuss different Methods to center form in HTML:
3 min read