ボックスを水平および垂直にするいくつかの一般的な方法

1.絶対配置を使用して、要素の左上隅の上:50% と左:50% をページの中央に配置し、次に移動を使用して要素の中心点をページの中央に調整します。
 

div{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width:200px;
        height:200px;
        background-color:pink;
  
    }

2.絶対位置決めを使用して、4 方向の値を 0 に設定し、マージンを自動に設定します。幅と高さが固定されているため、対応する方向が均等に分割され、水平方向と垂直方向のセンタリングが行われます。といった方向性を実現することができます。この方法は、ボックスに幅と高さがある場合に適しています。

.div { 
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 200px;
        height: 200px;
        background-color:red;
    }

3. Flex Layoutを使用して、align-items:center および justify-content:centerによってコンテナの垂直方向と水平方向の中央揃えを設定すると、その子要素も垂直方向と水平方向の中央揃えにすることができます。

.div {
        display:flex;
        justify-content:center;
        align-items:center;
        width: 100%;
        height: 100%;
        
      }