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

推薦する

サラウンドリフレクションロード効果を実現するHTML+CSS

この記事では、主に html + css を使用してサラウンド リフレクション ローディング エフェ...

背景位置パーセンテージ原則の詳細な説明

今日、誰かがコードを調整するのを手伝っていたとき、次のようなスタイルを見つけました。 背景位置: 5...

Nginx プロセス スケジューリングの問題の詳細な説明

Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...

HTML要素を非表示にするいくつかの方法

1. CSSを使用するコードをコピーコードは次のとおりです。スタイル="display:n...

ウェブデザイナーは適した人材

<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...

ユーザー エクスペリエンス デザイナーとは誰ですか?

怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...

MySQLへのJava接続の基礎となるカプセル化の詳細な説明

この記事では、Java接続MySQLの基礎となるカプセル化コードを参考までに紹介します。具体的な内容...

RHEL7.5 mysql 8.0.11 インストールチュートリアル

この記事はRHEL7.5でのMySQL 8.0.11のインストールチュートリアルを記録しています。具...

MySQL シリーズ 11 ログ

チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...

React-Native スクリーンショットコンポーネント react-native-view-shot の紹介と使い方のまとめ

目次1. 現象2. 解決策3. 要約: 1. 現象1. 要件: 特定の表示ページをキャプチャしてアル...

MySQL データベースを最適化する 8 つの方法の詳細な説明 (必読の定番)

導入:インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質に...

ElasticSearch と ElasticSearch-Head の Docker デプロイメントの実装

この記事では主にDockerを使ってElasticSearch:バージョン6.8.4をデプロイする方...

JavaScript でモバイル モーダル ボックスの効果を実現

この記事では、モバイルモーダルボックス効果を実現するためのJavaScriptの具体的なコードを参考...

シンプルな画像ドラッグ効果を実現する js

この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体...

データベースクエリの最適化: サブクエリの最適化

1. 事例会社のトップ以外の従業員全員を年齢別にグループ化します。 t_emp で id が存在しな...