CSS ボックスを中央揃えするためのよく使われるいくつかの方法 (要約)

<スタイル タイプ="text/css">
        .div1 {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線 #000000;
            位置: 相対的;
        }

        .div2 {
            幅: 40px;
            高さ: 40px;
            背景色: 赤;
            位置: 絶対;
            マージン: 自動;
            上: 0;
            左: 0;
            右: 0;
            下部: 0;
        }
    </スタイル>

    <divクラス="div1">
        <div class="div2">
        </div>
    </div>

<スタイル タイプ="text/css">
        .div1 {
            幅: 100ピクセル;
            高さ: 100px;
            境界線: 1px 実線 #000000;
            表示: テーブルセル;
            垂直位置合わせ: 中央;
        }

        .div2 {
            幅: 40px;
            高さ: 40px;
            背景色: 赤;
            マージン: 自動;
        }

    </スタイル>

    <divクラス="div1">
        <div class="div2">
        </div>
    </div>

<スタイル タイプ="text/css">
    .div1 {
        幅: 100ピクセル;
        高さ: 100px;
        境界線: 1px 実線 #000000;
        ディスプレイ: フレックス;
        /*!*flex-direction: column;*!オプション*/
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
    }

    .div2 {
        高さ: 40px;
        幅: 40px;
        背景色: 赤;
    }
</スタイル>
<divクラス="div1">
    <div class="div2">
    </div>
</div>

<スタイル タイプ="text/css">
    .div1 {
        幅: 100ピクセル;
        高さ: 100px;
        境界線: 1px 実線 #000000;
        位置: 相対的;
    }

    .div2 {
        高さ: 40px;
        幅: 40px;
        背景色: 赤;
        位置: 絶対;
        上位: 50%;
        左: 50%;
        -ms-transform: 変換(-50%、-50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: 変換(-50%, -50%);
        変換: translate(-50%, -50%);
    }
</スタイル>
<divクラス="div1">
    <div class="div2">
    </div>
</div>