Centering Images with CSS for Beginners

This guide explains how to center images using CSS!
It covers both horizontal and vertical alignment techniques and includes clear examples and practical tips that are easy for beginners to follow.

Horizontal Centering of Images Using CSS

This section explains how to center an image horizontally using CSS.
We'll cover three different methods, each with examples that are easy for beginners to understand and use.

Applying CSS Directly to the Image: display: block with margin-left: auto and margin-right: auto

In this method, you apply CSS directly to the image, not to its parent container. It works by turning the image into a block-level element and then setting its left and right margins to auto.

HTML 
<div class="container">
    <img class="image" src="image-source.jpg" alt="Image">
</div>
CSS 
.container {
    background-color: orange;
}
.image {
    width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
Result

How it works:

  • The image becomes a block-level element with display: block. This is necessary because margin auto doesn't work on inline elements.
  • margin-left: auto and margin-right: auto push the image equally from both sides, centering it horizontally.
  • This method works well when you only need to center a single image.

Using text-align: center on a Parent Element with Horizontal Space

This method centers the image by applying text-align: center to a parent container that has horizontal space. Since images are inline-level elements by default, they respond to text alignment settings.

HTML 
<div class="container">
    <img class="image" src="image-source.jpg" alt="Image">
</div>
CSS 
.container {
    background-color: orange;
    text-align: center; /* Centers inline content like text or images inside the container */
}
.image {
    width: 200px;
    vertical-align: top;
}
Result

How it works:

  • The container's text-align: center aligns inline-level content—including images—within it.
  • The image remains an inline element (by default), so this method works without changing its display.
  • You can also center text along with the image using this technique.

Using Flexbox on the Parent Container with justify-content: center

This method uses Flexbox to center the image.
It requires applying display: flex and justify-content: center to the parent container.

HTML 
<div class="container">
    <img class="image" src="image-source.jpg" alt="Image">
</div>
CSS 
.container {
    background-color: orange;
    display: flex;
    justify-content: center; /* Horizontally centers child elements */
}
.image {
    width: 200px;
}
Result

Each of these methods works slightly differently, and you can choose the one that best fits your layout. In the next section, we'll look at how to vertically center images as well.

Vertical Centering of Images Using CSS

This section explains how to center an image vertically using CSS. We'll go through two common methods suitable for beginners, with clear examples.

Using display: flex and align-items: center on the Parent Element

This method uses Flexbox on the parent container to vertically center its child image.

HTML 
<div class="container">
    <img class="image" src="image-source.jpg" alt="Image">
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    display: flex;
    align-items: center; /* Vertically centers child elements */
}
.image {
    width: 200px;
}
Result

How it works:

  • The container becomes a flex container with display: flex.
  • align-items: center vertically aligns the image (a flex item) within the container.
  • This method is straightforward and widely supported in modern browsers.
  • The container's height is set explicitly (e.g., height: 300px) to define the vertical space.

Using position and transform on Parent and Child Elements

This method uses absolute positioning combined with CSS transforms to vertically center the image inside a relatively positioned container.

HTML 
<div class="container">
    <img class="image" src="image-source.jpg" alt="Image">
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    position: relative;
}
.image {
    width: 200px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
Result

How it works:

  • The parent container has position: relative to act as a positioning reference.
  • The image is positioned absolutely at top: 50%, which sets its top edge halfway down the container.
  • transform: translateY(-50%) moves the image up by half of its own height, perfectly centering it vertically.
  • This method works well when Flexbox is not an option or when absolute positioning is required.

Both methods effectively center images vertically within a fixed-height container.

Centering Images Horizontally and Vertically Using CSS

This section covers how to center an image both horizontally and vertically inside a container using CSS.
Two beginner-friendly methods are explained with clear examples.

Using display: flex, justify-content: center, and align-items: center on the Parent Element

This method uses Flexbox on the parent container to center the child image both horizontally and vertically.

HTML 
<div class="container">
    <img class="image" src="image-source.jpg" alt="Image">
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    display: flex;
    justify-content: center;  /* Centers child elements horizontally */
    align-items: center; /* Centers child elements vertically */
}
.image {
    width: 200px;
}
Result

How it works:

  • The container becomes a flex container with display: flex.
  • justify-content: center aligns the image horizontally.
  • align-items: center aligns the image vertically.
  • This method requires the container to have a fixed height (e.g., height: 300px) to define the vertical space.
  • Flexbox is widely supported and easy to use for centering content.

Using position and transform on Parent and Child Elements

This method uses absolute positioning and CSS transforms to center the image inside a relatively positioned container.

HTML 
<div class="container">
    <img class="image" src="image-source.jpg" alt="Image">
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    position: relative;
}
.image {
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
Result

How it works:

  • The parent container uses position: relative to provide a positioning context.
  • The image is absolutely positioned at the center point (top: 50%, left: 50%).
  • The transform: translateX(-50%) translateY(-50%) moves the image back by half its width and height to perfectly center it.
  • This method is useful when Flexbox cannot be used or when absolute positioning is preferred.

Both methods effectively center images both horizontally and vertically.

See also