前回、横中央に配置する方法を案内しましたが、縦の中央配置は主に三つの方法があります。
①フレックスボックスを使う
（フレックスボックスやグリッドのコンテキストでアイテムを上下中央揃えにしたい場合）
.container {
display: flex;
align-items: center; /* 縦方向に中央寄せ */
}
③vertical-align: middle;を使う
(テーブルセルやインライン要素を上下中央揃えにしたい場合)
th, td {
text-align: center;
vertical-align: middle;
}
②疑似要素を使う
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
親要素のconteinerに対して、子要素のchildを中央から上に 50% の位置に移動せ、transform: translateY(-50%); によって子要素の高さの半分だけ上に移動させます。これで縦中央に配置されます。
他の方法もあると思いますが、私は上記をよく使います。
