CSSで全ての要素を上下左右中央揃えにするテクニック

CSSでは、真ん中に寄せるあれこれがいっぱいあるね。
時と場合、場所と時間の5W1Hで使うものも様々なので
用法も書きながら紹介しようと思います。

テキストを左右中央寄せ

これは上下には効かず、左右だけ中央に寄ります。
インライン要素の、「a」、「span」、「img」、「input」などは、あらかじめ「display:block」または、「display:inline-block;」を記述してくださいね！

【CSS】

text-align: center;

テキストを上下・左右中央寄せ

今度はテキストを上下左右中央寄せにします。
これは、親要素にあらかじめ幅と高さを設定し、「position:relative;」を追加します。
中央にしたい要素にはベンダープレフィックスも付けた指示も忘れないようにしてください。
（Android 4.2以下の端末は「-webkit-」が必要だったりします）
【CSS】

// 親要素に
.oya {
  width: 100%;
  height: 300px;
  position: relative;
}
// 中央にしたい要素に
.oya span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

画像の上下左右中央寄せ

これもテキストの時と同様に「transform」を使えば解決できます。
「transform」を使うので、親要素の幅と高さを指定しなくちゃいけません！
さらに、ベンダープレフィックスもお忘れなく。
【CSS】

// 親要素に
.oya {
  width: 100%;
  height: 300px;
  position: relative;
}
// 中央にしたい要素に
.oya span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

まとめ

どんな時も、上下左右中央寄せにする時は、「transform: transslate(-50%, -50%);」があればなんとかなりますね。