When I started learning web development, one of the first things I wanted to do was center an image on my webpage. It sounded simple, but it took me a while to figure out the best way to do it. If you’re also just getting started and searching how to center an image in CSS or how to center an image in HTML, you’re in the right place.
Let me walk you through it—step by step—in a way that even if you’ve never written a line of code before, you’ll get it.
What You Need Before Starting to center an image
Before we begin, you need two things:
- A basic HTML file
- An image (you can use any image from your computer or a free online image URL)
How to Center an Image in HTML
HTML Example:
<!DOCTYPE html>
<html>
<head>
<title>Center Image</title>
</head>
<body>
<img src="https://www.pixelstalk.net/wp-content/uploads/image11/Purple-flower-HD-wallpaper-for-desktop-with-rich-hues.jpg" alt="Purple flower">
</body>
</html>How to Center an Image in CSS Vertically and Horizontally
Let me show you the easiest way first. You can wrap your image inside a <div> and then use CSS to center it.
Method 1: Using text-align: center
<!DOCTYPE html>
<html>
<head>
<style>
.center-div {
text-align: center;
}
</style>
</head>
<body>
<div class="center-div">
<img src="https://www.pixelstalk.net/wp-content/uploads/image11/Vibrant-green-flower-wallpaper-with-fresh-lively-leaves.jpg" alt="Vibrant green flower">
</div>
</body>
</html>Here, the image is treated like a piece of text, and when we tell the container (div) to align text to the center, the image moves to the center too. Simple, right?
Method 2: Using Flexbox (Best Practice)
If you want your image to be right in the center of the entire screen (both up/down and left/right), here's a better way:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center; /* centers horizontally */
align-items: center; /* centers vertically */
height: 100vh; /* full height of the browser */
margin: 0; /* remove default margin */
}
</style>
</head>
<body>
<img src="https://www.pixelstalk.net/wp-content/uploads/image11/Yellow-flower-wallpaper-HD-with-bright-cheerful-blooms.jpg" alt="Yellow flower">
</body>
</html>Why I love this method: It's clean, modern, and works perfectly on all screen sizes. Flexbox is a powerful layout tool in CSS, and learning it early will help you later on.
Method 3: Using margin: auto
If your image is a block element, you can also use this trick:
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<img src="https://www.pixelstalk.net/wp-content/uploads/images6/Beautiful-Flower-Wallpaper-HD.jpg" alt="Beautiful Flower">
</body>
</html>This is another easy way to center an image horizontally. But it won’t work vertically unless you add extra code.
When I was just starting out, all these tags and styles felt overwhelming. But once I practiced a bit, it started to make sense. So don’t worry if it’s confusing at first—everyone starts as a beginner.
Now that you know how to center an image in CSS, go ahead and try it out on your own! Experiment a little, break things, and fix them. That’s the best way to learn coding.
Leave a Reply