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

Centering strategies: exploring alternatives

Apart from the flexbox model, there are multiple CSS techniques fit for centering an image, each coming with its own merits depending on the situation.

Utilizing absolute positioning

By combining absolute positioning with margin: auto within a position: relative parent, you get a great extent of control:

.parent {
  position: relative; /* establishing a new context */
}
.centered-image {
  position: absolute; /* abracadabra */
  margin: auto; /* clap clap... showtime */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* spreading peace... voila */
}


Embrace the grid layout

Presenting a modern approach – CSS Grid layout. All it takes is place-items: center:

.parent {
  display: grid; /* magic carpet */
  place-items: center; /* voila... Aladdin is flyer than ever */
  height: 200px;
}


Inline block: perfect for text-align and line-height

For inline entities or images surrounded by text content, use text-align: center paired with matching line-height and height of the parent:

.parent {
  text-align: center; /* aligned with the Force */
  line-height: 200px; /* same as height, just chilling */
  height: 200px;
}
.centered-image {
  display: inline-block; /* Ninja vanish */
  vertical-align: middle; /* it's magic, you know */
}


Adapting centering techniques for advanced scenarios

In some situations, you may need more finesse than what simple centering tools offer.

Overflow: practical measures

Should the content potentially overflow, consider wrapping your inner content and using overflow: auto on the wrapper:

.outer-container {
  display: flex; /* joining the FlexNation */
  align-items: center; /* bring it in, folks */
  justify-content: center; /* center of attraction */
  overflow: auto; /* roundabout traffic solution */
  height: 200px; /* skyscraper status */
}


Responsive centering: viewport units as saviours

For a responsive solution, use viewport units combined with flexbox or grid layout:

.parent {
  display: flex; /* let's flex and roll */
  align-items: center; /* all aboard the center train */
  justify-content: center; /* center, sweeter than nectar */
  height: 50vh; /* 50% of viewport height, standing tall */
}


Unknown size: utilization of negative margin

When the image size is unknown, employ transform: translate alongside position: absolute:

.parent {
  position: relative; /* homebase established */
}
.centered-image {
  position: absolute; /* I'm free to roam around */
  top: 50%; /* halfway there */
  left: 50%;
  transform: translate(-50%, -50%); /* zap... smack in the middle */
}


Recognizing and resolving common issues

Sometimes simple centering can be obstructed by unforeseen CSS peculiarities.

Aspect ratio preservation

Ensure the image maintains its aspect ratio, especially when dealing with responsive design, by leveraging the object-fit property of CSS:

img {
  object-fit: contain; /* or cover, covers like sunflower */
  max-width: 100%; /* I'm elastic */
  height: auto; /* self-adjusting */
}


Margin disruption

Unexpected margins can disrupt the perfect centering. Make sure you reset them using CSS:

img {
  margin: 0; /* nullify, total wipeout! */
}


Handling image layering

To layer images, control the Z-axis stacking using the z-index property:

img {
  position: absolute; /* I'm on the move, baby */
  z-index: 1; /* king of the hill */
}
