Question

I want to center an image of unknown width/height on a page, while making sure that it shrinks if it is bigger than the page (i.e. use max-width/max-height).

I tried using the display:table-cell method, but max-width is ignored in Firefox for all elements within elements declared with display:table-cell. Is there a way to vertically center a variable-height element without using display:table-cell?

I can change the mark up. JavaScript is acceptable, but I cannot use JQuery (or any other JS library).

Answer 1

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%).