垂直对齐：div中的图像

Question

  

可能重复：
  Vertical centering variable height image while maintaining max-width/height

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

我搜索了很多问题，但没有一个问题回答我的问题，应该解决这些问题。

Answer 1

从this answer获取的基本想法。不依赖于IE7不支持的display:table-cell;。

守则（demo）

<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;
}

Answer 2

您可以将其显示为表格单元格：

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;
}