CSSだけで要素を中央に配置する

特定を要素（画像）を中央に配置したいときの方法をまとめておきます。
やり方を覚えておけば、いろんな場所で役に立ちそうなので記事として残しておきます。

参考サイト
コード

参考サイト

参考になったのが下記のブログの記事です。
たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック（IE9にも対応）

コード

上記のページの内容を参考に、まずは下記のような HTML を用意しました。

sample.html

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <img src="sample.png">
  </body>
</html>

表示すると、左上にそのまま画像が表示されると思います。
今回は、この画像を画面の中央に表示するのが目的です。

では、下記の CSS を追加してみます。

sample.css

<style type="text/css">
  img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

これだけで画面の中央に画像が配置されると思います。
ただし、一部のブラウザでのみ有効なため各ブラウザで有効にする場合には、下記のようにします。

sample.css

<style type="text/css">
  img {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
</style>

場合によっては JS で無理やり中央に配置していましたが、CSS だけでもできることで処理が軽くなるので使い方次第かなと思います。