How to Center an Image in CSS

There are three popular ways to center an image using CSS: the ‘text-align’ property, the ‘margin: auto’ property, or CSS Flexbox.

Let’s break each of these down to position your image just right.

Using the text-align property

The ‘text-align’ property is handy for centering an image horizontally within its container.

This method involves wrapping your image with a block-level element, like a ‘div’. You then apply the ‘text-align’ property to the ‘div’, setting it to ‘center’. Here’s how it looks:

<div style="text-align: center;"> <img src="image.jpg" /> </div>

This snippet will center your image within the ‘div’.

Using the margin: auto property

In your CSS, you would set the image’s ‘margin-left’ and ‘margin-right’ properties to ‘auto’:

img {
  display: block;
  margin: 0 auto;
}

The ‘auto’ value for the left and right margins tells the browser to split available space evenly, centering the element.

Using CSS Flexbox

CSS Flexbox is a powerful layout system, and it gives you the ability to center images both horizontally and vertically with ease.

You can make this happen by placing your image within a flex container and using the ‘justify-content’ property set to ‘center’:

<div class="container"> <img src="path-to-your-image.jpg" alt="description"> </div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

This CSS will center your image within the ‘.container’ div horizontally and vertically.

Now that you know the methods choosing one will depend on your needs. If you only need to center an image horizontally, the ‘text-align’ and ‘margin: auto’ property does the trick. But if you want to center both ways, CSS Flexbox would be your best bet.