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

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