Vertical centering variable height image while maintaining max-width/height
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).
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%
).