How to Center an Image in HTML and CSS

Designing a visually appealing website often involves the challenge of properly aligning and centering images. In this guide, we’ll explore three different techniques for centering images in HTML and CSS: Flexbox, Grid, and traditional methods.
by Josephine Loo ·

Contents

    When it comes to designing a website, one of the most common challenges is properly aligning and centering images. To align and center images in HTML and CSS, there are a few different approaches you can take. In this article, we’ll learn three different methods you can use to center images on your web pages using HTML and CS.

    We’ll transform the web page from this:

    a website with a title and an image .png

    to this:

    centering an image using CSS flexbox.png

    HTML and CSS Template

    Use the code below to create the web page above:

    HTML

    <h1>Welcome to My Website</h1>
    <img src="https://www.bannerbear.com/images/ghost/2023-10-31-3-ways-to-generate-open-graph-images-automatically/5.png" alt="" class="img">
    

    CSS

    .img {
      width: 400px;
    }
    

    🐻 Bear Tips: You can copy and paste the HTML and CSS to your code or duplicate this CodePen template to follow along with this tutorial.

    Centering an Image in HTML and CSS

    Method 1: Using CSS Flexbox

    Flexbox is a powerful CSS layout that allows you to arrange items in rows or columns to create flexible and responsive web pages. It aligns and divides space among items in a container to best fill the available spaces. Depending on the item’s size and the available space, the item can be expanded or shrunk, thus the name “flex”.

    To center an image using Flexbox, place the image within a container, such as a <div> and give it a class or ID:

    <div class="image-container">
      <img src="https://www.bannerbear.com/images/ghost/2023-10-31-3-ways-to-generate-open-graph-images-automatically/5.png" alt="" class="img">
    </div>
    

    Then, apply the following CSS properties to the container element:

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

    The justify-content property is used to align flex items along the main axis of the flex container, which is “row” (horizontal) by default. On the other hand, the align-items property is used to align flex items along the cross-axis of the flex container, which is “column” (vertical) in this case.

    When both values are set to center, you are centering the flex items both horizontally and vertically within the flex container:

    centering an image using CSS flexbox.png

    CodePen

    ### Method 2: Using CSS Grid

    CSS Grid is another modern CSS layout system that provides powerful grid-based layouts with rows and columns. Unlike Flexbox which supports only one-dimensional layouts (either rows or columns), CSS Grid allows you to create layouts in both directions simultaneously.

    To center an image using CSS Grid, place the image within a container, such as a <div> and give it a class or ID:

    <div class="image-container">
      <img src="https://www.bannerbear.com/images/ghost/2023-10-31-3-ways-to-generate-open-graph-images-automatically/5.png" alt="" class="img">
    </div>
    

    Then, apply the following CSS properties to the container element:

    .container {
      display: grid;
      place-items: center;
    }
    

    The place-items property is a shorthand property for align-items and justify-items in CSS Grid. The CSS place-items: center; sets the value of both properties to center:

    centering an image using CSS Grid.png

    CodePen

    🐻 Bear Tips: Although they sound similar, the justify-content property is exclusive to CSS Flexbox while the justify-items property is exclusive to CSS Grid.

    Method 3: Without CSS Flexbox or Grid (Traditional Techniques)

    Flexbox and Grid are very useful for responsive designs that adapt to different screen sizes or more complex designs. If your layout design is simple and no other complex layout requirements, traditional layout techniques or inline styles could also be sufficient.

    Like other methods shown previously, place the image within a container, such as a <div> and give it a class or ID:

    <div class="image-container">
      <img src="https://www.bannerbear.com/images/ghost/2023-10-31-3-ways-to-generate-open-graph-images-automatically/5.png" alt="" class="img">
    </div>
    

    If the image is the only item within the <div>, you can center it simply using the text-align and vertical-align properties:

    .image-container {
      text-align: center;
    }
    
    .image-container img {
      vertical-align: middle;
    }
    

    This will center the image within the container:

    centering an image without CSS Flexbox or Grid.png

    CodePen

    ## Which Method is the Best for Centering an Image?

    Each method has its advantages and use cases. You should choose the best method depending on your specific needs but here is a general guide:

    • Flexbox - Great for creating flexible and responsive layouts that involve dynamic content where the size of items can vary. If your layout involves simple alignment of items in a row or column, Flexbox is often simpler to use.
    • Grid - Ideal for more complex layouts with multiple rows and columns, especially for responsive designs that adapt to different screen sizes. It allows you to create grid-based designs and control the placement of items within the grid cells.
    • Traditional techniques - If your layout is simple and you don't require complex positioning or responsiveness, traditional layout techniques can be sufficient. It is also a good choice when you need to support older browsers that do not fully support Flexbox or Grid.

    Conclusion

    Centering images in HTML and CSS is essential for creating visually appealing web pages. The choice between Flexbox, Grid, or traditional techniques depends on the specific layout requirements and the level of control you need over your design. Besides that, other factors like browser support, readability, and maintenance are also worth considering. Remember, always consider the specific needs of your project and choose the approach that best fits those requirements!

    More HTML and CSS tutorials:

    About the authorJosephine Loo
    Josephine is an automation enthusiast. She loves automating stuff and helping people to increase productivity with automation.

    5-Minute Crash Course to LinkedIn Video Ads (A 2024 Guide)

    LinkedIn video ads can help your B2B brand reach and engage a professional audience. Read our guide to learn what you need to know about this ad type.

    8 Free Text-to-Image AI Generator to Try in 2024

    If you’re looking for a cost-effective text-to-image AI generator in 2024 for creating images for social media, blogs, e-commerce, or other purposes, consider these eight free options.

    How to Use Whisper API to Transcribe Videos (Python Tutorial)

    Let's learn how to transcribe video to text using Whisper API, a speech-to-text AI offered by OpenAI.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

    How to Center an Image in HTML and CSS
    How to Center an Image in HTML and CSS