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

Div 基本レイアウト

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

CSS スタイル

1. 座標位置とマージン: 自動

親要素に相対的な位置付けを追加し、子要素に絶対的な位置付けを追加します。

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

2. フレックスレイアウトを使用して、コンテンツを水平方向と垂直方向に中央揃えします。

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

3. position:absoluteとtransformを使用する

ここで覚えておく必要があるのは、変換でパーセンテージが使用される場合、それは親ボックスではなく、それ自体の長さと幅に相対的であるということです。

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

4. ポジショニングとマイナスマージン

サブボックスの長さと幅が固定されている場合にのみ適しています

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

5.display:テーブルセル

display:table-cell; と vertical-align:middle は、子ボックスを数値の方向に中央揃えするために使用されます。

margin:auto; は子ボックスを水平方向に中央揃えします。ボックスを一方向にのみ中央揃えにしたい場合は、もう一方のボックスを削除します。

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

CSSを使用してサブ要素divを水平および垂直に中央揃えする例についての記事はこれで終わりです。CSSを使用してサブ要素divを水平および垂直に中央揃えする方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を続けて参照してください。今後とも123WORDPRESS.COMを応援してください。

<<: HTMLを使用して、IPを制限する投票ウェブサイトの不正行為スキームを実装する

>>: VMware は Centos7 システムの PXE+kickstart 無人インストールの詳細なプロセスを実装します