Centering an image in HTML is a common task in web design. There are several methods to achieve this, depending on whether you want to center the image horizontally, vertically, or both. In this article, we will explore different approaches to center an image using HTML and CSS.
Table of Content
Center an Image Horizontally using text-align Property
The text-align: center; style is applied to the container element, which centers all inline content, including images. You can use the CSS text-align property on a container element to center an element horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305182658/HTML-tutorial.jpg"
width="350px" height="230px" alt="HTML Image">
</div>
</body>
</html>
Output:
Center an Image Horizontally using margin Property
The display: block; style changes the image from an inline element to a block-level element, which allows the use of auto margins. The margin-left: auto; and margin-right: auto; styles center the image horizontally within its containing block. You can use margin properties (margin-left, and margin-right) with the property value auto on the image to center image horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305182658/HTML-tutorial.jpg"
width="350px" height="230px" alt="HTML Image">
</body>
</html>
Output:
Center an Image Horizontally and Vertically using Flexbox
The container is made a flex container with display: flex;. The justify-content: center; style centers the image horizontally, and align-items: center; centers it vertically. The height: 100vh; style ensures the container takes up the full viewport height. Flexbox provides a more flexible way to center elements both horizontally and vertically.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100vh; /* Full viewport height */
}
</style>
</head>
<body>
<div class="flex-container">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305182658/HTML-tutorial.jpg"
width="350px" height="230px" alt="HTML Image">
</div>
</body>
</html>
Output:
Center an Image Horizontally and Vertically using Grid Layout
The container is made a grid container with display: grid;. 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. CSS Grid Layout provides another way to center elements both horizontally and vertically.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
place-items: center; /* Center both horizontally and vertically */
height: 100vh; /* Full viewport height */
}
</style>
</head>
<body>
<div class="grid-container">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305182658/HTML-tutorial.jpg"
width="350px" height="230px" alt="HTML Image">
</div>
</body>
</html>
Output: