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

最初のもの:

CSSの位置プロパティの使用

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

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

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

効果画像:

2番目のタイプ:

新しい CSS3 属性 table-cell、vertical-align:middle を使用します。

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

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

    </スタイル>

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

効果：

3番目のタイプ:

フレックスボックスを使ったレイアウト

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

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

効果：

4番目のタイプ:

transform 属性を使用する (欠点: Html5 をサポートする必要がある)

<スタイル タイプ="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>

効果画像:

CSS ボックスを中央揃えにするためのよく使われる方法 (まとめ) についての記事はこれで終わりです。CSS ボックスを中央揃えにする方法の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML ページヘッダーコード例の詳細な説明

>>: シンプルなウェブデザインコンセプトのカラーマッチング