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

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 無人インストールの詳細なプロセスを実装します

推薦する

MySQL データベースの操作とデータ型

目次1. データベース操作1.1 データベースの表示1.2 データベースを作成する1.3 データベー...

vueを使用して登録ページの効果を実現し、vueを使用してSMS認証コードログインを実現します

この記事の例では、登録ページの効果を実現するためのVueの具体的なコードを参考までに共有しています。...

Apache での ab パフォーマンス テスト結果を分析する

私はパフォーマンス テストを行うために常に Loadrunner を使用してきました。 Loadru...

最新の仮想マシン VMware 14 インストール チュートリアル

まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...

記事では、js を使用して弾幕効果を実現する方法を説明します

目次新しい HTML ファイルを作成します。初期テンプレートを作成するHTML の追加CSS パディ...

Docker コンテナ入門から夢中になるまで(推奨)

1. Docker とは何ですか?仮想マシンについては誰もが知っています。Windows に Li...

ユーザー名が使用可能かどうかを確認するVueメソッド

この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...

MySQL 5.7.24 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、参考までにMySQL 5.7.24圧縮パッケージのインストールチュートリアルを紹介しま...

MySQLで判定文を書く方法のまとめ

MySQL で判断文を書く方法:方法1. CASE関数case関数の構文: CASE条件 値1の場合...

Centos6.9 インストール Mysql5.7.18 ステップ記録

インストール手順 rpm -ivh mysql-コミュニティ-共通-5.7.18-1.el7.x86...

Vue Element Sortablejs を使用してテーブル列をドラッグする詳細な説明

1. css: ドラッグテーブル.css @charset "UTF-8"; ....

LeetCode の SQL 実装 (178. スコアランキング)

[LeetCode] 178.ランクスコアスコアをランク付けする SQL クエリを記述します。2 ...

vite を使用して vue3 アプリケーションを構築する方法

1. インストールヒント: 現在、VUE3.0 の公式翻訳ドキュメントはありません。しかし、すでに誰...

完全バックアップとポイントインタイムバックアップにmysqldumpを使用する方法

Mysqldump は MySQL の論理バックアップに使用されます。高速ではありませんが、柔軟性が...

MySQL レプリケーション メカニズムの原理の説明

背景レプリケーションはデータの完全なコピーです。レプリケーションが必要な理由として、まず思い浮かぶの...