Centering an image horizontally and vertically within a div can be achieved using various techniques in CSS. One common and straightforward method is by using Flexbox, which provides a very flexible and easy manner to align content. Here's how to do it step-by-step:

HTML Structure

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

CSS Styling

.container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */
  height: 300px; /* or any height */
}

img {
  max-width: 100%; /* Optional: Makes sure the image is not bigger than the container */
  height: auto;    /* Optional: Keeps the aspect ratio of the image */
}

Explanation

1. Flexbox Container: The .container div is set to display: flex; which makes it a flex container and allows you to use flex properties for alignment.
2. Horizontal and Vertical Centering:
   • justify-content: center centers the child elements (in this case, the image) horizontally within the container.
   • align-items: center centers the child elements vertically within the container.
3. Container Size: You must define a height for the .container to effectively see the vertical centering (since the default height is determined by the content size).
4. Image Scaling: The max-width: 100%; and height: auto; on the img ensures that the image scales down if it's larger than the container, but maintains its original aspect ratio.

Other Methods

If for some reason you prefer not to use Flexbox, there are other methods as well:

Grid Alignment

.container {
  display: grid;
  place-items: center;
  height: 300px;  /* any specific height */
}

Using Absolute Positioning

This method needs careful application of top, left offsets, and transform:

.container {
  position: relative;
  height: 300px;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  height: auto;
}

This centers the image both vertically and horizontally by offsetting the image from the top and left and then pulling it back into center with the transform property.

With these methods, you can center an image inside a div using CSS effectively. Choose the one that best fits the context of your project’s layout needs.