商品リストだったりギャラリーだったり、画像のサイズに依存せずに枠線の中央に画像をおきたいことってありませんか？
tableやbeforeやspanを使って今まで中央においていましたが、面白い記事(画像サイズに依存しない絶対中央配置)を見つけました。

コード抜擢
html

<body>
  <img src="image.jpg" />
</body>

css

img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

こういった画像の中央配置方法があったんだなぁと関心。
つまりどういうことかというと

imgにabusoluteとmax-width,max-heightを100%すればいいよ

ってことですね。

spanやbeforeだとある条件下で画像が枠から落ちてしまう現象が確認とれていますが、これだとそういう問題もなさそうですね。

問題は要素の外にrelativeを置けない場合に使えないってことですかねぇ・・・
新しい方法みつけた！と思ったら２年前の記事だっていうね。もしかしたらもっといい方法があるのかも。
もっと色々探ってみると面白そうですね。