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.
Table of Content
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.
<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:
2. 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.
<!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:
Vertically 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.
<!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:
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.
<!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:
