CSS を使用した div サブ要素の水平および垂直中央揃えの例

<div class="main">
   <div class="center"></div>
  </div>

 。主要{
    幅: 300ピクセル;
    高さ: 300px;
    背景色: 赤;
    位置: 相対的;
   }
   。中心{
    幅: 100ピクセル;
    高さ: 100px;
    背景色: スカイブルー;
    位置: 絶対;
    左: 0;
    右: 0;
    上: 0;
    下部: 0;
    マージン: 自動;
   }

 。主要{
    幅: 300ピクセル;
    高さ: 300px;
    背景色: 赤;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
   }
   。中心{
    幅: 100ピクセル;
    高さ: 100px;
    背景色: 緑黄色;
   } 

 。主要{
     幅: 300ピクセル;
     高さ: 300px;
     背景色: 赤;
     位置: 相対的;
    }
    。中心{
     幅: 100ピクセル;
     高さ: 100px;
     背景色: ピンク;
     位置: 絶対;
     左: 50%;
     上位: 50%;
     変換: translateX(-50%) translateY(-50%);
    }

 。主要{
     幅: 300ピクセル;
     高さ: 300px;
     背景色: 赤;
     位置: 相対的;
    }
    。中心{
     幅: 100ピクセル;
     高さ: 100px;
     背景色: ピンク;
     位置: 絶対;
     左: 50%;
     上位: 50%;
     左マージン: -50px;
     上マージン: -50px;
    } 

。主要{
     幅: 300ピクセル;
     高さ: 300px;
     背景色: 赤;
     表示: テーブルセル;
     垂直位置合わせ: 中央;
    }
    。中心{
     幅: 100ピクセル;
     高さ: 100px;
     背景色: #000;
     マージン: 自動;
    }