How to Vertically Center an Image Within a Responsively-Sized Div?

How to Vertically Align an Image within a Div with Flexible Height

Problem:

You have a div container with a responsive height that adjusts proportionally to changes in width. Within this container, you have an image with varying heights. Your challenge is to vertically align the image in the middle of the container regardless of its height.

Solution:

To achieve vertical alignment in this responsive environment, we introduce an innovative approach involving the placement of an inline element alongside the image.

Vertical Alignment:

1. Pseudo-element Creation: Within the .img-container (which hosts the image), we create a block-level (pseudo-)element directly before the image.
2. Height Adjustment: This pseudo-element expands vertically to consume all available height, enforcing a 100% height to match the container's height.
3. Vertical Alignment of Elements: Both the pseudo-element and the image gain vertical-align: middle; styling, ensuring proper alignment within the line.
4. Font Size Removal: To remove any white space between these elements, we set font-size: 0; on the parent container.

Benefits of This Approach:

• Dynamic container dimensions
• Automatic image alignment without explicit height specifications
• Versatility in aligning other elements, such as divs with variable content (adjust font-size back to display text)

Responsive Container:

To make the container's height flexible with its width, we employ percentage values on the padding-top property:

• 100% padding-top: Creates a square with equal height and width
• Higher percentage values (e.g., 150% or 200%): Height is a larger percentage of the width

This padding technique can also be applied to a child div or CSS pseudo-elements.

Content Placement:

Padding-top creates excessive space above and/or below content within the container. To resolve this, we enclose the content in a wrapper element:

• Absolute positioning: Removes the wrapper from the normal document flow, allowing it to fill the container's entire space.
• Top, right, bottom, and left properties: Expand the wrapper to cover the container's dimensions.

Final Implementation:

Combining these techniques, we achieve our goal:

<div class="responsive-container">
  <div class="dummy"></div>
  <div class="img-container">
    <img src="image.jpg" alt="Image">
  </div>
</div>

.responsive-container {
  width: 60%;
  height: 300px;  /* Example height for demo purposes */
  position: relative;
}

.img-container {
  text-align: center;
  font: 0/0 a;
}

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

.img-container img {
  vertical-align: middle;
  display: inline-block;
  max-height: 100%;  /* Optional: Ensures image stays within container */
  max-width: 100%;   /* Optional: Ensures image stays within container */
}

Demonstration:

[Vertically Align Image in Responsive Div](https://codepen.io/cristianorocha/pen/dywbQMV)

The above is the detailed content of How to Vertically Center an Image Within a Responsively-Sized Div?. For more information, please follow other related articles on the PHP Chinese website!