垂直对齐:div中的图像

Question

可能重复:
垂直居中变量高度图像,同时保持最大宽度/高度

所以这是一个问题,我有不固定尺寸的图像,我只知道高度或宽度必须是200px.现在我想将这个图像放在固定大小为200px x 200px的div中,并将其垂直和水平居中.可能吗？

我搜索了很多问题,但没有人回答我的问题,这应该是解决问题所有问题.

Answer 1

从这个答案中得出的基本想法.不依赖于display:table-cell;IE7不支持的内容.

守则(演示)

<div class="image-wrapper"><img src="http://example.com/image.png"></div>

.image-wrapper {
    position:relative;
    width:200px;
    height:200px;
}
.image-wrapper img {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}