How to center image horizontally within a `div` element?

html

flexbox

centering

css-classes

byAlex Kataev·Aug 3, 2024

When you need to center a horizontal image within a div, CSS is your best friend. If the image is inline, use text-align: center; on the parent div. For block images, apply display: block; and margin: 0 auto; directly on the img.

/* For inline images */
div { text-align: center; }

/* For block-level images or images that like to take up space */
img { display: block; margin: 0 auto; }

<!-- Inline centering -->
<div style="text-align: center;"><img src="image.jpg" alt="Centered Image"></div>

<!-- Block centering - a.k.a the big block theory -->
<div><img style="display: block; margin: 0 auto;" src="image.jpg" alt="Centered Image"></div>

Choose based on the image's display type for effective centering.

Flex & center: A love story

In a world where layouts run wild, Flexbox emerges as the savior. It simplifies centering content, even images!

#artiststhumbnail {
  display: flex;
  justify-content: center;
  /* You just got served, Mr. Image! */
}

Maintaining the aspect ratio is crucial to preserve your image's dignity. align-self: center; is the cloak of honor for your image against stretching inside a flex container.

#artiststhumbnail a img {
  align-self: center;
  /* Not today, distortions. Not today! */
}

Old wine in a new bottle: Inline-block method

Hit the jackpot with multiple images, or when you have text and your favorite emoji side by side. Behold, the Inline-block trick:

#imagewrapper {
  text-align: center; // Let's get in line, folks!
}

#imagewrapper img {
  display: inline-block;
  margin: 0 5px; /* No one likes crowded images */
}

Nothing better than consistent gaps between images. Great for image galleries and broadcasting your browser's cat photos collection.

Positioning: A fine balance

Have a demanding pixel-perfect situation? Try out relative positioning, along with a transform to keep the perfect balance.

.centered-image {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* Balancing. It's not just for yoga anymore! */
}

Advanced centering techniques

Margin: Love thy neighbors

When your element has a specific width, left and right margins set to auto is the secret recipe for equal horizontal spacing:

.centered-image {
  display: block;
  width: 50%; /* Fifty shades of image width */
  margin-left: auto;
  margin-right: auto;
  /* Perfect symmetry, straight out from a Da Vinci sketchbook */
}

Creating a dedicated CSS class for centering enables better maintainability and reusable style definitions:

.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Just keep reusing. Just keep reusing 🐠 */
}

Transform: Compatibility mode

For a wide range of browser support, including the aged and wise ones, harness the power of the transform property:

.centered-image {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* Sorry old browsers, no senior discounts here */
}

Inline elements: The center strike-back

For the rebellious inline elements that seem to ignore your margin commands, here's a trick:

.inline-center {
  text-align: center;
}

.inline-center img {
  display: inline;
  /* The revolution has begun. Viva la center! */
}

explain-codes / Html / How to center image horizontally within a `div` element?

Linked

How to make an image center (vertically & horizontally) inside a bigger div



Vertically align an image inside a div with responsive height



How to center horizontally div inside parent div



Aligning a float:left div to center?



Center image in table td in CSS



How to position a div in the middle of the screen when the page is bigger than the screen



Center aligning a fixed position div



Flex & center: A love story Old wine in a new bottle: Inline-block method Positioning: A fine balance Advanced centering techniques