CSS で水平方向と垂直方向に中央揃えする 10 の方法を教えます (要約)

<テンプレート>
  <div class="two">
    <div class="parent">
      <div class="child">123</div>
    </div>
  </div>
</テンプレート>

<style lang="less" スコープ>
。親{
  マージン: 0 自動;
  幅: 300ピクセル;
  高さ: 300px;
  境界線: 1px 実線の赤;
  ボックスのサイズ: 境界線ボックス;
  。子供 {
    高さ: 100px;
    幅: 100ピクセル;
    背景: #2f8df0;
  }
}
</スタイル>

。親{
	幅:300ピクセル;
    マージン:0 自動;
}

。子供{
    テキスト配置: 中央
    line-height:100px //子要素の高さがわかっているので、高さと同じ高さを設定します}

 。親{
     line-height: 300px; //親要素の高さを把握し、その高さと同じ高さを設定します }
   .child1{
    表示: インラインブロック;
    垂直位置合わせ: 中央;
    line-height: initial; //initial キーワードは、CSS プロパティをデフォルト値に設定するために使用されます。
   }
   .child2{
    表示: インラインブロック;
    垂直位置合わせ: 中央;
    line-height: initial; //initial キーワードは、CSS プロパティをデフォルト値に設定するために使用されます。
   }

。親{
位置: 絶対;
上: 0;
下部: 0;
左: 0;
右: 0;
}

。親{
   位置: 相対 
}
。子供{
    位置: 絶対;
    上位:50%;
    残り:50%;
    変換:translate(-50%,-50%)
}

// 注意: 上下に中央揃えする必要がある場合は、上だけを残し、左右に中央揃えする必要がある場合は、左だけを残します。translateY(-50%) または translateX(-50%) を設定します。

。親{
  ディスプレイ:フレックス;
  アイテムを中央揃えにします。
  コンテンツを中央揃えにする。
}
。子供{
 
}

。親{
    line-height: 300px; //高さを親要素と同じに設定します text-align: center;
}
。子供{
    表示: インラインブロック;
    垂直位置合わせ: 中央;
    line-height: initial; //initial キーワードは、CSS プロパティをデフォルト値に設定するために使用されます。
    text-align: left; //テキスト表示を希望の効果にリセットします}

。親{
    表示: テーブルセル;
    垂直位置合わせ: 中央;
    テキスト配置: 中央;
}
。子供{
  表示: インラインブロック;
}

。親{
   位置: 相対 
}
。子供{
    位置: 絶対;
    上位: 50%;
    左: 50%;
    margin-left: -50px; //サブ要素の幅と高さを知る margin-top: -50px; //サブ要素の幅と高さを知る}

。親{
   位置: 相対 
}
。子供{
    位置: 絶対;
    上: 0;
    左: 0;
    右: 0;
    下部: 0;
    マージン: 自動;
}

。親{
   位置: 相対 
}
。子供{
    位置: 絶対;
    上: calc(50% - 50px);
    左: calc(50% - 50px);
}

 // 共通スタイルは上部にあります <div class="parent">
      <div class="box-child">
        <div class="child">123</div>
      </div>
    </div>

。親{
     writing-mode: vertical-lr; //テキスト表示の方向を変更します。text-align: center;
}
.box-child{
    書き込みモード: 水平方向tb;
    表示: インラインブロック;
    テキスト配置: 中央;
    幅: 100%;
}
。子供{
    text-align: left; //テキスト表示を希望の効果にリセットします margin: 0 auto;
}

。親{
    表示: グリッド;
}
。子供{
     位置合わせ: 中央;
     自己正当化: 中央揃え;
}

<テーブル>
    <t本文>
        <tr>
            <td class="親">
                <div class="child">123</div>
            </td>
        </tr>
    </tbody>
</テーブル>

。親{
    テキスト配置: 中央;
}
。子供{
    表示: インラインブロック;
}