Centering an image in HTML is a common task that can be approached in various ways, depending on the specific needs of your page layout. Below we'll go over some tips on how to center elements on a web page, using CSS and HTML.
Using the Center Tag
Historically, the <center> tag was used in HTML to center-align text and images within a webpage. It is however important to note that the <center> tag is now deprecated in HTML5 due to its presentational nature, which goes against the principles of modern web standards (that separate content from styling).
While it might still work in some browsers, it is not recommended for use in new HTML code. The recommended way is to use CSS for all layout and styling purposes.
Example using the<center> tag:
<center>
<img src="path/to/image.jpg" alt="Centered Image">
</center>Using CSS
To center an image horizontally using CSS, you can use the margin property:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Center Image Horizontally</title>
<style>
.center-image {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<img src="path/to/image.jpg" alt="Centered Image" class="center-image">
</body>
</html>Using Flexbox
Flexbox provides a more robust way to center elements both horizontally and vertically. Here's how you can center an image using Flexbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Center Image with Flexbox</title>
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<img src="path/to/image.jpg" alt="Centered Image">
</body>
</html>Other helpful resources
How Do You Center Text in the Middle of an Image in CSS?
To overlay text centered over an image, you can use the following approach:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Over Image</title>
<style>
.container {
position: relative;
text-align: center;
}
.text-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>
<div class="container">
<img src="path/to/image.jpg" alt="Background Image">
<div class="text-block">
Centered Text
</div>
</div>
</body>
</html>How Do I Center an Image and Make It Responsive in CSS?
To center an image and make it responsive, ensure it scales with the size of its container:
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}How Do I Center Align an Image Vertically?
To vertically center an image in a container, you can use Flexbox:
.container {
display: flex;
align-items: center;
height: 200px; /* or any height */
}How Do I Center an Image Without Stretching in CSS?
To center an image without stretching, avoid setting absolute widths or heights that exceed the image’s natural dimensions:
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}How Do I Make an Image Fit My Screen in HTML?
To make an image fit the screen while maintaining its aspect ratio, you can use:
img {
width: 100vw; /* 100% of viewport width */
height: 100vh; /* 100% of viewport height */
object-fit: cover; /* Cover the container without losing aspect ratio */
}