CSSで要素を上下左右の中央に配置する

サイトを作っていると、画像やテキストなどの要素を親要素の上下左右の中央に配置しなければならないことがあります。
左右の中央に配置するのはtext-align:center（インライン要素）やmargin: 0 auto（ブロック要素）を使えばできます。
しかし、難しいのが上下。
なかなか、センタリングできずに苦労しました。

今回、配置したい要素の幅や高さが不規則でも大丈夫な方法で2つサンプルを作ってみました。

Flexboxで要素を上下左右の中央に配置する

flexbox（フレキシブルボックス）はCSS3から登場した可変ボックスのレイアウト。flexbox の対応ブラウザが増えて、使えるようになってからはいろいろと楽になりました。

display: flex;と書かれた要素をフレックスコンテナ、その直下の子要素をフレックスアイテムを呼びます。
使う時はフレックスアイテム（子要素）を横並びにするために使うことが多いですが、上下左右の中央に配置する時にも使えます。

<section>
  <p>真ん中</p>
</section>

body {
  margin: 0;
}
section {
  width: 100%;
  height: 100vh;
  background: #ffeeee;
  display: flex; // Flexboxに変更
  justify-content: center; // 子要素の左右を中央にする
  align-items: center; // 子要素の上下を中央にする
}

p {
  padding: 5px;
  background: #ccccff;
  color: #fff;
}

親要素であるsectionにdisplay: flex;、justify-content: center;、align-items: center;と書くと上下左右の中央に配置できます。

sectionにdisplay: flex;と書きフレックスコンテナにしたら、子要素であるフレックスアイテムのフレックスコンテナ内での配置を決めるjustify-contentプロパティとalign-itemsプロパティも一緒に指定します。
今回は上下左右の中央寄せなので、どちらもcenterになります。

positionとtransformで要素を上下左右の中央に配置する

positionはボックスが何を基準にして位置を決めるのかを指定するプロパティ、transformプロパティはCSS3から登場して要素を変形（拡大、縮小、回転、傾斜、移動）させるプロパティです。

HTMLは上のサンプルと変わりません。

body {
  margin: 0;
}
section {
  width: 100%;
  height: 100vh;
  background: #ffeeee;
  position: relative;
  
}

p {
  margin-top: 0; // 表示に影響する上のマージンを削除
  padding: 5px;
  background: #ccccff;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

親要素であるsectionにposition: relative;を指定し、真ん中に配置する子要素には絶対配置のposition: absolute;を指定します。
子要素は親要素の左上を基準として、top:50%、left:50%の位置に配置されます。子要素の基準も左上なのでtransform: translate(-50%, -50%);を指定して、ずれを修正すれば子要素は上下左右の中央に配置されます。

今回のように子要素にmargin(場合によってはpadding)がある時はmarginの分だけtopやleftの0％の位置がずれます。
marginを削除すれば大丈夫ですが、marginがない要素を子要素にするのが無難です。
また、transform:translate()の数値は相対値で書くと要素の幅と高さを基準に計算されます。