画像を枠一杯に合わせて縦横中央寄せ

以下、間違いがありました。display: tableを指定すると、width, height設定に関わらず、中身に応じてサイズが変わってしまいました。修正案検討中。

画像を背景に指定して、background-size: contain;を使えば一発ですが、そうもいかない時もあります。(画像の選択がしたい時とか)

画像が表示領域の縦か横どちらかより大きな場合には以下で対応可能です。
(画像が小さい場合には拡大されず、画像サイズで表示されてしまいます。)

<div class="vertical-align">
  <div>
    <img src="xxx" class="fit" />
  </div>
</div>

div.vertical-align {
    display: table;
    width: 100%; /* 必要に応じて固定値 */
    height: 100%; /* 必要に応じて固定値 */
}

div.vertical-align > div {
    display: table-cell;
    vertical-align: middle;
}

img.fit {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

(heightが固定値の時には、一番外側のdivは必要なく、table-cellにheightを指定すればよい。が、そういうことを覚えていなくても上記ですべて対応可能。)