CSS レイアウト チュートリアル: 垂直方向の中央揃えを実現する方法

CSS レイアウト チュートリアル: 垂直方向の中央揃えを実現する方法

序文

最近、フロントエンドの知識をまとめており、いくつかのインタビューにも参加しました。インタビュー中に、垂直方向の中央揃えを要求する質問に遭遇しました。ここでこれをまとめ、知識を固めたいと思います。

CSS 垂直中央揃え

1. 中央揃えを実現するには、line-height を使用します。この方法は、純粋なテキストに適しています。

<!-- css -->
<スタイル>
。両親 {
  高さ: 400px;
  行の高さ: 400px;
  幅: 400ピクセル;
  境界線: 1px 実線の赤;
  テキスト配置: 中央;
}

。子供 {
  背景色: 青;
  色: #fff;
}
 </スタイル>
</head>

<本文>
<!-- html -->
<div class="親">
   <span class="child">CSS レイアウト、垂直方向の中央揃え</span>
</div>
</本文>

2. 親コンテナの相対的な配置と子コンテナの絶対的な配置を設定することで、ラベルは余白を通じて中央に配置されます。

<!-- css -->
<スタイル>
。両親 {
  高さ: 400px;
  幅: 400ピクセル;
  境界線: 1px 実線の赤;
  位置: 相対的;
}

。子供 {
  幅: 200ピクセル;
  高さ: 100px;
  行の高さ: 100px;
  テキスト配置: 中央;
  色: #fff;
  背景色: 青;
  /* 4 つの方向を 0 に設定し、マージンを自動に設定して中央に配置します */
  位置: 絶対;
  上: 0;
  右: 0;
  下部: 0;
  左: 0;
  マージン: 自動;
}
 </スタイル>
</head>

<本文>
<!-- html -->
<div class="親">
  <span class="child">CSS レイアウト、垂直方向の中央揃え</span>
</div>
</本文>

3. 柔軟なレイアウト flex 親は display: flex に設定され、子は margin auto に設定されて適応的な中央配置が実現されます。

  <!-- css -->
  <スタイル>
    。両親 {
      高さ: 400px;
      幅: 400ピクセル;
      境界線: 1px 実線の赤;
      ディスプレイ: フレックス;
    }

    。子供 {
      幅: 200ピクセル;
      高さ: 100px;
      行の高さ: 100px;
      テキスト配置: 中央;
      色: #333;
      背景色: 黄色;
      マージン: 自動;
  }
 </スタイル>
</head>

<本文>
 <!-- html -->
  <div class="親">
    <span class="child">CSS レイアウト、垂直方向の中央揃え</span>
  </div>
</本文>

4. 親は相対的な位置に設定され、子は絶対的な位置に設定され、これは変位変換によって実現されます。

  <!-- css -->
  <スタイル>
    。両親 {
      高さ: 400px;
      幅: 400ピクセル;
      境界線: 1px 実線の赤;
      位置: 相対的;
    }

    。子供 {
      幅: 200ピクセル;
      高さ: 100px;
      行の高さ: 100px;
      テキスト配置: 中央;
      色: #fff;
      背景色: 緑;
      位置: 絶対;
      上位: 50%;
      左: 50%;
      変換: translate(-50%, -50%);
    }
  </スタイル>
</head>

<本文>
  <!-- html -->
  <div class="親">
    <span class="child">CSS レイアウト、垂直方向の中央揃え</span>
  </div>
</本文>

5. 親はエラスティック ボックスを設定し、エラスティック ボックス関連のプロパティを設定します。

 <!-- css -->
 <スタイル>
    。両親 {
      高さ: 400px;
      幅: 400ピクセル;
      境界線: 1px 実線の赤;
      ディスプレイ: フレックス;
      justify-content: center; /* 水平 */
      align-items: center; /* 垂直 */
    }

    。子供 {
      幅: 200ピクセル;
      高さ: 100px;
      色: 黒;
      背景色: オレンジ;
    }
  </スタイル>
</head>

<本文>
  <!-- html -->
  <div class="親">
    <span class="child"></span>
  </div>
</本文>

6. グリッドレイアウトでは、親がテーブルに変換され、子がインラインまたはインラインブロックに設定されます。 (vertical-align: middle を使用するための前提条件は、インライン要素と、display 値が table-cell である要素であることに注意してください)。

 <!-- css -->
 <スタイル>
    。両親 {
      高さ: 400px;
      幅: 400ピクセル;
      境界線: 1px 実線の赤;
      表示: テーブルセル;
      テキスト配置: 中央;
      垂直位置合わせ: 中央;
    }

    。子供 {
      幅: 200ピクセル;
      高さ: 100px;
      色: #fff;
      背景色: 青;
      display: inline-block; /* 子要素の設定はインラインまたはインラインブロック*/
    }
  </スタイル>
</head>

<本文>
  <!-- html -->
  <div class="親">
    <span class="child"></span>
  </div>
</本文>

要約する

以上がこの記事の全内容です。この記事の内容が皆様の勉強や仕事に何らかの参考学習価値をもたらすことを願います。123WORDPRESS.COM をご愛顧いただき、誠にありがとうございます。

<<:  シームレスなトークンリフレッシュを実現する方法

>>:  Webスキル: 複数のIEバージョンの共存ソリューション IETester

推薦する

Vueはプルダウンとスクロールでデータを読み込む例を実装しています

目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...

知っておくべき 7 つのネイティブ JS エラーの種類

目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...

Kubernetes の応用分野の概要

Kubernetes は、アプリケーションの移植性とハイブリッド クラウド/マルチクラウドの展開をサ...

MySQLで現在の時間間隔の前日のデータをクエリする

1. 背景実際のプロジェクトでは、分散スケジュールされたタスク実行の状況に遭遇することがあります。ス...

Linux で Bash コマンド プロンプトをカスタマイズする方法

序文ご存知のとおり、bash (Bourne-Gain Shell) は、ほとんどの Linux デ...

Vue3でアイコンを使用する2つの例

目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...

Tomcat サーバーが tomcat7w.exe を開けない場合の解決策

今日、Tomcat サーバーの設定時にちょっとした問題が発生したので、参考までにいくつかご説明したい...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...

Vueルータールーティングガードの詳細な説明

目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...

Vue シングルページ SEO の 4 つのソリューションについての簡単な説明

目次1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)利点:...

メニューノードのすべての子ノードを再帰的に検索する MySQL メソッド

背景プロジェクトにはメニューノードのすべてのノードをチェックする要件があります。オンラインでチェック...

vue の webpack -v エラー解決の概要

XiaobaiはVueについて学び、次にwebpackについて学び、そしてさまざまなものをインストー...

16 の XHTML1.0 と HTML の互換性ガイドラインの概要

1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...

JavaScriptは行削除機能を備えたテーブルを動的に生成します

この記事の例では、テーブルを動的に生成したり行を削除したりするためのJavaScriptの具体的なコ...

Linux の文字端末でマウスを使って赤い四角形を移動する方法

すべてがファイルです! UNIX はすでにそれを言っています。エリック・レイモンドはこう言いました。...