How To Horizontally Center Image in HTML & CSS

Are you a beginner web developer struggling with aligning images in the center of your web page? Don’t worry, we’ve got you covered! In this tutorial, we’ll guide you through the process of horizontally centering an image using CSS, the styling language of the web.

Step 1: Wrap Your Image in a Container

The first step is to create a container element for your image. This container will act as a reference point for centering the image. Let’s say your container has the class name image-container, you can create it as follows:

<div class="image-container">
    <img src="your-image.jpg" alt="Your Image">

Step 2: Apply Styles to the Container

Now that we have our image wrapped in a container, let’s apply some CSS styles to achieve the horizontal centering effect. In your CSS file or within <style> tags in the HTML file, add the following styles for the image-container class:

.image-container {
    display: flex;
    justify-content: center;

By setting the container’s display property to flex, we can use flexbox properties to easily center the image horizontally. The justify-content: center rule aligns the contents of the container along the horizontal axis.

Step 3: Adjust Image Width (Optional)

If you want to control the width of your image, you can add an additional CSS rule to the img tag inside the container. For example, to set the image width to 50%, you can use:

.image-container img {
    width: 50%;

Feel free to adjust the percentage value to your liking.

Step 4: Save and Refresh

Save your HTML and CSS files, or refresh your web page if you’re working directly in the browser. Voila! Your image is now horizontally centered within the container.

Additional Tips

author's bio photo

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.