CSSで上下中央ぞろえをするには【CSS】

CSS（<main>を中央に持っていきたい時）

main{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f5f8fa;    //背景色を設定しただけです。中央寄せには不要。
}

こうなる

解説

1. position: fixed; – 要素を画面に対して固定位置にします。

2. top: 50%; – 要素の上端を画面の上から50%の位置に設定します。

3. left: 50%; – 要素の左端を画面の左から50%の位置に設定します。

4. transform: translate(-50%, -50%); – 要素を左と上にそれぞれ50%ずつ移動させます。これは、要素自身のサイズに基づいて、正確に画面の中央に配置するために必要です。topとleftで指定した位置は要素の左上隅に適用されるため、要素が完全に中央に来るように補正する必要があります。

この組み合わせにより、要素は視覚的に画面の中央に配置されます。topとleftで画面の中心点を指定し、transformで要素の中心をその点に合わせることで、正確な中央揃えが実現されます。