垂直居中可变高度图像,同时保持最大宽度/高度

Question

我想在页面上居中一个未知宽度/高度的图像,同时确保它比页面大(即使用max-width/ max-height)时缩小.

我尝试使用该display:table-cell方法,但max-width在Firefox中忽略了声明的元素中的所有元素display:table-cell.有没有办法在不使用display:table-cell？的情况下垂直居中可变高度元素？

我可以改变标记.JavaScript是可以接受的,但我不能使用JQuery(或任何其他JS库).

Answer 1

这应该证明工作得很好......没有必要的JavaScript :)

请参阅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">

注意:此类可以非常容易地用于任何事情.如果您将此项用于图像以外的其他内容,请确保添加一个TAG.absoluteCenterCSS规则,其中包含您选择的max-height和您正在使用的HTML标记(例如,和/ 或小于).max-widthTAGdiv.absoluteCentermax-widthmax-height100%