CSSで画像を縦横中央に表示させる

いつも忘れるシリーズ

いっつもやり方忘れて過去のソースを見返すコレ、
「CSSで画像を縦横中央に表示させる」方法。

ポイントはdisplay:table-cellを使うわけですが、
なぜかいつも間違えるのでここに明記！

縦横200pxのdiv要素の中に、
縦または横が180pxの画像を縦横中央に配置したい場合、

↓これだとダメ！ききません！

<div class="item">
  <img src="hoge">
</div>

.item {
  width: 200px;
  height:200px;
  display:table;
}
.item　img {
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  max-width: 180px;
  max-height:180px;
}

↓こっちが正解。

<div class="item">
  <div class="item_img">
    <img src="hoge">
  </div>
</div>

.item {
  width: 200px;
  height:200px;
  display:table;
}
.item_img {
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}
.item img {
  max-width: 180px;
  max-height:180px;
}

・imgタグの親要素に対してdisplay:table-cell；
・さらにその親要素に対してdisplay:table;
です。

後は、imgタグの親要素に
・横位置中央配置のtext-align:center;
・縦位置中央配置のvertical-align:middle;
を書いてあげればOK。

ふう、、、display:table;なんてコレのときしか使ったことないからな～。
まぁ、もうこれ書いたから忘れないでしょう～。

たぶんね、、、。