CSS で要素を垂直方向に中央揃えする 7 つの方法

.wrapBox5{
    幅: 300ピクセル;
    高さ: 300px;
    border:1px 赤一色;
    位置: 相対的;
}
.wrapItem5{
    幅: 100ピクセル;
    高さ: 50px;
    位置: 絶対;
    背景：黄色;
    上位: 50%;
    残り:50%;
    上マージン: -25px;
    左マージン: -50px;
}

.wrapBox{
    幅: 300ピクセル;
    高さ: 300px;
    背景: 黄色;
    位置: 相対的;
}
.wrapItem{
    幅: 100ピクセル;
    高さ: 50px;
    背景：緑;
    表示: インラインブロック;
    位置: 絶対;
    上: 0px;
    下:0px;
    左: 0px;
    右: 0px;
    マージン:自動;
}

.wrapBox6{
    幅: 300ピクセル;
    高さ: 300px;
    border:1px 緑一色;
    位置: 相対的;
}
.wrapItem6{
    幅: 100ピクセル;
    高さ: 50px;
    位置: 絶対;
    背景：黄色;
    上: calc(50% - 25px);
    左:calc(50% - 50px);
}

.wrapBox{
    幅: 300ピクセル;
    高さ: 300px;
    背景:#ddd;
    位置: 相対的;
}
.wrapItem{
    幅: 100ピクセル;
    高さ: 50px;
    背景：緑;
    位置: 絶対;
    上位: 50%;
    残り:50%;
    変換: translate(-50% , -50%);
}

.wrapBox2{
    幅: 300ピクセル;
    高さ: 300px;
    背景: 青;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}
/*注: 子要素を行ブロック要素として設定しない場合でも、単一のレイヤーを占有することはありません*/
.wrapItem2{
    幅: 100ピクセル;
    高さ: 50px;
    背景：緑;
}

.wrapBox3{
    幅: 300ピクセル;
    高さ: 300px;
    背景: 黄色;
    表示: テーブルセル;
    垂直位置合わせ: 中央;
    テキスト配置: 中央;
}
.wrapItem3{
    幅: 100ピクセル;
    高さ: 50px;
    背景：緑;
    表示: インラインブロック;
}

.tableBox{
    border:2px 実線黄色;
    幅: 300ピクセル;
    高さ: 300px;
}
.tableBox テーブル{
    幅:100%;
    高さ:100%;
}
.centerWrap{
    テキスト配置: 中央;
    垂直位置合わせ: 中央;
}
.centerアイテム{
    表示: インラインブロック;
    背景:ピンク;
}