CSSは垂直中央を実現する

1.display:table
親要素にdisplay:tanleを付けると、その表示方法がテーブルに設定されるので、テーブルのvertical-align propertyプロパティを使用できます.

#main{
            display: table;
        }
#cell {
            display: table-cell;
            vertical-align: middle;
        }

    

        
Content goes here
    

2.絶対位置決め
この方法は,絶対位置決めのdivを用いて,そのtopを50%に設定し,top marginを負のcontent高さの一般に設定した.これは、オブジェクトがCSSで一定の高さを指定しなければならないことを意味します.

#content {
            position: absolute;
            top: 50%;
            height: 240px;
            margin-top: -120px; /* negative half of the height */
        }

Content goes here

3.position
position:absoluteを使用して、固定幅と高さのdivがあります.このdivはtop:0に設定されている.bottom:0;.しかし、固定高さがあるため、上下との間隔が0ではないため、margin:auto;中央に配置されます.margin:autoを使用するブロックレベル要素を垂直に中央に配置するのは簡単です.

#content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 240px;
            width: 70%;
        }

Content goes here

4.line-height
単行テキストをセットします.line-heightをそのオブジェクトのheight値に簡単に設定するだけでテキストを中心にすることができます.

#content {
    height: 100px;
    line-height: 100px;
}

Content goes here

5.flex justify-contentプロパティは、主軸上のアイテムの位置合わせを定義します.

.container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100px;
        }

Content goes here