How to vertically align an image inside a div ?

Here are additional methods and variations to vertically center an image inside a div, including modern and legacy-friendly approaches:

1. Flexbox + Margin Auto

   .container {
     display: flex;
     height: 300px;
   }

   .container img {
     margin: auto; /* Centers both vertically and horizontally */
     max-width: 100%;
     max-height: 100%;
   }

• Use Case: Simplest Flexbox method with automatic margins.

2. CSS Grid + place-items

   .container {
     display: grid;
     place-items: center; /* Centers both axes */
     height: 300px;
   }

   .container img {
     max-width: 100%;
     max-height: 100%;
   }

• Use Case: Ultra-concise grid alignment.

3. Absolute Positioning + Margin Auto

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

   .container img {
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto 0; /* Vertical centering */
     max-width: 100%;
     max-height: 100%;
   }

• Use Case: No transform needed; works with fixed/variable heights.

4. Flexbox with align-self on Image

   .container {
     display: flex;
     height: 300px;
   }

   .container img {
     align-self: center; /* Aligns only the image vertically */
     max-width: 100%;
     max-height: 100%;
   }

• Use Case: Align only the image (not other siblings).

5. Inline-Block + Pseudo-Element

   .container {
     height: 300px;
     text-align: center; /* Horizontal alignment */
   }

   .container::before {
     content: '';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
   }

   .container img {
     vertical-align: middle;
     display: inline-block;
     max-width: 90%;
     max-height: 90%;
   }

• Use Case: Legacy support (pre-Flexbox/Grid).

6. Viewport Units (Dynamic Containers)

   .container {
     height: 50vh; /* 50% of viewport height */
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .container img {
     max-width: 90%;
     max-height: 90%;
   }

• Use Case: Full-screen or dynamic-height layouts.

7. Aspect Ratio Preservation

   .container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 300px;
     background: #f0f0f0;
   }

   .container img {
     width: auto;
     height: auto;
     max-width: 100%;
     max-height: 100%;
     aspect-ratio: 16/9; /* Preserve original ratio (optional) */
   }

• Use Case: Prevent image distortion while centering.

8. Grid + Explicit Image Placement

   .container {
     display: grid;
     height: 300px;
   }

   .container img {
     grid-area: 1/1; /* Place in first cell */
     align-self: center;
     justify-self: center;
     max-width: 100%;
   }

• Use Case: Overlay images or control grid placement.

9. Padding Hack (No Fixed Height)

   .container {
     padding: 50px 0; /* Equal top/bottom padding */
     text-align: center; /* Horizontal alignment */
   }

   .container img {
     vertical-align: middle;
     max-width: 100%;
   }

• Use Case: Fluid containers without a fixed height.

10. Flexbox + object-fit

   .container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 300px;
     width: 300px; /* Fixed container size */
   }

   .container img {
     width: 100%;
     height: 100%;
     object-fit: contain; /* Scales image to fit */
   }

• Use Case: Fill the container without stretching the image.

Key Takeaways:

• Flexbox/Grid are the most modern and flexible solutions.
• Absolute Positioning and Inline-Block work for older browsers.
• Use object-fit: contain or aspect-ratio to preserve image proportions.
• Combine methods for complex layouts (e.g., Grid + Flexbox).

Choose the method based on your project’s browser support, layout complexity, and image behavior requirements!