How to Center an Image in HTML?
Center an image in HTML can be done with the help of <center> tag. The <center> is depreciated from HTML5, so we can use the text-align property, margin, and different ways to center an image horizontally, vertically, or both using 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>
.center{
display: flex;
align-items: center; /* Center vertically */
height: 60vh;
}
</style>
</head>
<body>
<div class="center">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"
alt="HTML Image">
</div>
<p>
CSS Flexbox, short for Flexible Box Layout, offers
a streamlined way to design adaptable and visually
appealing layouts. It works primarily in one
dimension (row or column) to intelligently distribute
space among elements within a container, resulting
in clean alignment and responsive designs suitable
for various screen sizes.
</p>
</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:
