Vertical Centering Variable Height Image While Maintaining Max-Width/Height

Vertical centering variable height image while maintaining max-width/height

This should prove to work quite well... no JavaScript necessary :)

See the working demo on jsFiddle.

CSS

/* Don't Change - Positioning */
.absoluteCenter {
 margin:auto;
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
}

/* Sizing */
img.absoluteCenter {
 max-height:100%;
 max-width:100%;
}

HTML

<img class="absoluteCenter" src="PATHTOIMAGE">

Note: This class can be used for anything quite easily. If you use this for something other than an image, make sure to add a TAG.absoluteCenter CSS rule with a max-height and max-width of your choosing (where TAG is the HTML tag you're using [e.g. div.absoluteCenter] and max-width/max-height is less than 100%).

Vertically centering an image with auto height and max-height

Try this:

figure > img {
 position: relative;
 margin-top:50%;
 transform:translateY(-50%);
}

http://jsfiddle.net/kr9q3a0h/1/

Vertical alignment of image in div

You can make it display like a table cell:

http://jsbin.com/ijoved/1/

/* This is item wrapping each image */
.item { 
  height: 200px;
  width: 200px;
  display:table-cell;
  vertical-align:middle;
  text-align: center;
}

How to vertically center content with variable height within a div?

Just add

position: relative;
top: 50%;
transform: translateY(-50%);

to the inner div.

What it does is moving the inner div's top border to the half height of the outer div (top: 50%;) and then the inner div up by half its height (transform: translateY(-50%)). This will work with position: absolute or relative.

Keep in mind that transform and translate have vendor prefixes which are not included for simplicity.

Codepen: http://codepen.io/anon/pen/ZYprdb

Vertically align an image inside a div with responsive height

Here is a technique to align inline elements inside a parent, horizontally and vertically at the same time:

Vertical Alignment

1) In this approach, we create an inline-block (pseudo-)element as the first (or last) child of the parent, and set its height property to 100% to take all the height of its parent.

2) Also, adding vertical-align: middle keeps the inline(-block) elements at the middle of the line space. So, we add that CSS declaration to the first-child and our element (the image) both.

3) Finally, in order to remove the white space character between inline(-block) elements, we could set the font size of the parent to zero by font-size: 0;.

Note: I used Nicolas Gallagher's image replacement technique in the following.

What are the benefits?

The container (parent) can have dynamic dimensions.
There's no need to specify the dimensions of the image element explicitly.
We can easily use this approach to align a <div> element vertically as well; which may have a dynamic content (height and/or width). But note that you have to re-set the font-size property of the div to display the inside text. Online Demo.

<div class="container">
    <div id="element"> ... </div>
</div>

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

The output

Vertically align an element in its container

Responsive Container

This section is not going to answer the question as the OP already knows how to create a responsive container. However, I'll explain how it works.

In order to make the height of a container element changes with its width (respecting the aspect ratio), we could use a percentage value for top/bottom padding property.

A percentage value on top/bottom padding or margins is relative to the width of the containing block.

For instance:

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Here is the Online Demo. Comment out the lines from the bottom and resize the panel to see the effect.

Also, we could apply the padding property to a dummy child or :before/:after pseudo-element to achieve the same result. But note that in this case, the percentage value on padding is relative to the width of the .responsive-container itself.

<div class="responsive-container">
  <div class="dummy"></div>
</div>

.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

Demo #1.

Demo #2 (Using :after pseudo-element)

Adding the content

Using padding-top property causes a huge space at the top or bottom of the content, inside the container.

In order to fix that, we have wrap the content by a wrapper element, remove that element from document normal flow by using absolute positioning, and finally expand the wrapper (bu using top, right, bottom and left properties) to fill the entire space of its parent, the container.

Here we go:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Here is the Online Demo.

Getting all together

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="Sample Image">
  </div>
</div>

.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

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

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

Here is the WORKING DEMO.

Obviously, you could avoid using ::before pseudo-element for browser compatibility, and create an element as the first child of the .img-container:

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="Sample Image">
</div>

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

UPDATED DEMO.

Using `max-*` properties

In order to keep the image inside of the box in lower width, you could set max-height and max-width property on the image:

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

Here is the UPDATED DEMO.

Vertically center image on page and maintain aspect ratio on resize

If the image is big enough, you can use max-width and max-height instead of width and height. This will reduce the size of the image as necessary, maintaining the aspect ratio.

img {
    max-width: 70%;
    max-height: 70%;
}

To center it, you can use the absolute centering technique...

.wrap {
    position: relative;
}
img {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

html, body, .image, .wrap {

  height: 100%;

  padding: 0;

  margin: 0;

}

.wrap {

  position: relative;

}

img {

  max-width: 70%;

  max-height: 70%;

  margin: auto;

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

}

.text {

  margin-top: -50px;

  text-align: center;  

}

<div class="image">

  <div class="wrap">

    <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">

  </div>

</div>

<div class="text">Scroll down</div>

Vertically center image when image is higher than container

You can use absolute positioning for your image , negative top/bottom values and margin:auto; to verticaly center the image in the container :

.wrapper {

  width: 90%;

  max-width: 600px;

  margin: 1em auto;

  background-color: #E9ADAD;

  max-height: 200px;

}

.container {

  position:relative;

  padding-bottom:40%;

  overflow: hidden;

}

img {

  position:absolute;

  top:-50%; bottom:-50%;

  margin:auto;

  width: 100%;

  height: auto;

}

<div class="wrapper">

  <div class="container">

    <img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">

  </div>

</div>

How to vertically align an image inside a div

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {

    height: 25px;      /* Equals maximum image height */

    width: 160px;

    border: 1px solid red;

    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;

    margin: 1em 0;

}

.helper {

    display: inline-block;

    height: 100%;

    vertical-align: middle;

}

img {

    background: #3A6F9A;

    vertical-align: middle;

    max-height: 25px;

    max-width: 160px;

}

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=17px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=15px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=13px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=11px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=9px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=7px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=5px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=3px />

</div>

Vertical Centering Variable Height Image While Maintaining Max-Width/Height