How to Vertically Center an Image in a Div with Responsive Height?

Vertically Align an Image Inside a Div with Responsive Height

In this guide, we'll address how to vertically align an image within a div that has a responsive height.

The Approach

To achieve vertical alignment, we'll employ inline-block elements and leverage CSS properties like position, top, height, and text-align. Here's how it works:

1. Create a Pseudo-Element

Add an inline-block pseudo-element as the first child of the container div. Set its height to 100% to fill the container's height.

2. Vertical Alignment

Set the vertical-align property to middle for both the pseudo-element and the image to ensure they are aligned vertically.

3. Remove Spacing

To eliminate any whitespace between the pseudo-element and the image, set the parent div's font-size to 0, collapsing any text content.

Implementation

Consider the following HTML and CSS:

<div class="container">
  <div class="img-container">
    <img src="..." alt="Image">
  </div>
</div>

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

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

.img-container {
  display: inline-block;
  vertical-align: middle;
}

The Result

This technique allows the image to be vertically aligned within the container while maintaining the responsive height of the container.

Max-Properties for Image Size

To ensure that the image does not exceed the container's size, consider setting max-height and max-width properties on the image:

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

The above is the detailed content of How to Vertically Center an Image in a Div with Responsive Height?. For more information, please follow other related articles on the PHP Chinese website!