左右中央揃えの方法はご存知の方も多く、
インライン要素の場合はtext-align:center;、
ブロック要素の場合はmargin:0 auto;です。

では、上下中央揃えはどうでしょうか？

vertical-align:middle;を指定すると上下に中央寄せすることができます。
が、vertical-alignが効くのは「インライン要素」と「テーブルセル」だけです。

じゃあ、ブロック要素を上下中央に揃えたい場合はどうすればいいの？

という対応策で、インライン要素には高さを指定できないので「テーブルセル」を使う方法がよく紹介されています。
つまり、display:teble-cell;を使う方法です。

たしかにシンプルでわかりやすいですが、デザインをマークアップするうえで、上下中央に揃えるためだけにテーブルセル化するのも抵抗があることがあります。
ブロック要素はブロック要素として上下中央に揃えたいのです。

ブロック要素を上下中央に揃える

中央寄せにしたい要素にposition:absolute;を指定して、上下からの距離を0に指定します。（top:0; bottom:0;）
そして、margin:auto;を指定すれば出来上がりです。

<div class=&quot;wrap&quot;>
    <div class=&quot;block-item&quot;>ブロック要素です。</div>
</div>

.wrap {
    background-color: #ccc;
    width: 500px;
    height: 500px;
    position: relative;
}
.block-item {
    background-color: #666;
    width: 150px;
    height: 150px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}

ブロック要素を上下左右中央に揃える

先ほどの上下中央揃えを踏まえて、上下左右中央揃えは、中央寄せにしたい要素にposition:absolute;を指定して上下左右からの距離を0に指定します。（top:0; right:0; bottom:0; left:0;）そして、やはり最後にmargin:auto;を指定すれば出来上がりです。

<div class=&quot;wrap&quot;>
    <div class=&quot;block-item&quot;>ブロック要素です。</div>
</div>

.wrap {
    background-color: #ccc;
    width: 500px;
    height: 500px;
    position: relative;
}
.block-item {
    background-color: #666;
    width: 150px;
    height: 150px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

上下左右の距離は必ず0でなければならないわけではありません。重要なのはこれらのpositionの指定とmargin:auto;の組み合わせです。
このような挙動になる理由は、以下を参考にしてください。

参考サイト

position: absolute; の指定で要素が上下左右中央配置になる理由