中央寄せはそれぞれこんな感じ

最初に実装例をまとめておきます。

順番は、

• ・上下中央
• ・左右中央
• ・上下左右中央
• ・transform: translate(-50%,-50%);を使って上下左右中央

の順番で実装しています。

上下中央寄せにする方法

該当要素に以下のCSSを指定すると上下中央寄せにすることができます。
topとbottomの値を0にしてmargin: auto;を指定してあげればOKです。
※基準となる要素にposition: relative;を忘れずに！

CSS
コピー
.box{
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
}

左右中央寄せにする方法

該当要素に以下のCSSを指定すると上下中央寄せにすることができます。
leftとrightの値を0にしてmargin: auto;を指定してあげればOKです。
※基準となる要素にposition: relative;を忘れずに！

CSS
コピー
.box{
   position: absolute;
   left: 0;
   right: 0;
   margin: auto;
}

上下左右中央寄せにする方法

該当要素に以下のCSSを指定すると上下左右中央寄せにすることができます。
top,bottom,left,rightの値を0にしてmargin: auto;を指定してあげればOKです。
※基準となる要素にposition: relative;を忘れずに！

CSS
コピー
.box{
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}

おまけ（transformを使う方法）

この記事の趣旨とずれてしまうのですがtransform: translate(-50%,-50%);を使って上下左右中央寄せにする方法もご紹介します。

該当要素に以下のCSSを指定すると上下左右中央寄せにすることができます。
topとleftの値を50%にしてtransform: translate(-50%,-50%);を指定してあげればOKです。
※基準となる要素にposition: relative;を忘れずに！

CSS
コピー
.box04{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

もうちょっと詳しく知りたい人はこちらの記事をどうぞ！

positionで要素を中央寄せにする方法【CSS】

topとleftを50%にすると中央に来ると思いきや要素の基準となる左上が中央に来るのです。transform: translate(-50%,-50%);を指定することによって要素の半分だけ戻すことができるので中央に配置されるようになるわけなのです。