CSS で垂直方向の中央揃えを実装するいくつかの方法の概要

CSS で垂直方向の中央揃えを実装するいくつかの方法の概要

フロントエンドのレイアウト プロセスでは、水平方向の中央揃えを実現するのは比較的簡単で、通常は margin:0 auto; と親要素の text-align: center; によって実現できます。しかし、垂直方向の中央揃えを実現するのはそれほど簡単ではありません。以下では、私が作品で垂直方向の中央揃えを実現するために使用しているいくつかの方法を紹介します。

1. 行の高さは高さと等しい/行の高さのみを設定する

この方法は、テキストを中央揃えするのに適しています。 コアは、行の高さをそれを囲むボックスの高さと同じに設定するか、高さを設定せずに行の高さを設定することです。 この方法は、テキストが中央揃えされ、高さが固定されているシーンに適しています。 使用すると便利で役立ちます。

//html
<div class="middle">555</div>
 
//css
。真ん中{
  高さ: 50px;
  行の高さ: 50px;
  背景: 赤;
} 

注目すべきは

インライン要素の場合は高さがないので、まずインライン要素をインラインブロックまたはブロック要素に変換する必要があります。

2. 垂直位置合わせ: 中央

この種の要素の中央揃えでは、親要素の行の高さが自身の高さと等しい必要があり、この要素はインライン ブロック要素です。 3 つの条件がすべて満たされた場合にのみ、垂直方向のセンタリングを実現できます。コードは次のとおりです。

//html
<div class="main">
   <div class="middle"></div>
</div>

//css
。主要 {
  幅: 200ピクセル;
  高さ: 300px;
  行の高さ: 300px;
  背景: #dddddd;
}
。真ん中{
  背景: 赤;
  幅: 200ピクセル;
  高さ: 50px;
  display: inline-block; // または display: inline-table;
  垂直位置合わせ: 中央;
} 

この方法では固定の行の高さが必要であり、実際に達成される中央揃えは真の中央揃えではなく、近似中央揃えであることに注意してください。

3. 絶対位置と負のマージン

この方法の核となるのは、まず中央に配置する要素を絶対位置に設定し、次にその top: 50%; に要素自体の高さの負の半分に等しい margin-top を加えて中央に配置することです。利点は、実装が簡単で、親要素の高さをパーセンテージで指定でき、行の高さを設定する必要がないことです。コードは次のとおりです。

//html
<div class="main">
  <div class="middle"></div>
</div>
  
//css
。主要 {
  幅: 60ピクセル;
  高さ: 10%;
  背景: #dddddd;
  position: relative; //親要素は相対位置に設定されます}
。真ん中{
  position: absolute; //絶対位置に設定します top: 50%; //上の値は50%です
  margin-top: -25%; // margin-top を要素の高さの半分に設定します width: 60px;
  高さ: 50%;
  背景: 赤;
}

4. 絶対位置と margin:auto

まずコード:

//html
<div class="main">
  <div class="middle"></div>
</div>
  
//css
。主要 {
  幅: 60ピクセル;
  高さ: 10%;
  背景: #dddddd;
  position: relative; //親要素は相対位置に設定されます}
。真ん中{
  幅: 30%;
  高さ: 50%;
  position: absolute; //絶対位置に設定します top: 0;
  bottom: 0; // 上と下を 0 に設定します。
  left: 0; //left と right も 0 に設定すると、水平方向と垂直方向の両方の中央揃えを実現できます right: 0;
  マージン:自動;
  背景: 赤;
}

この方法の利点は、垂直方向のセンタリングだけでなく、水平方向のセンタリングも実現できることです。欠点は、ネットワークやパフォーマンスが悪い場合に、ボックスが直接固定されず、ユーザーエクスペリエンスが低下する可能性があることです。

5. フレックスレイアウト

フレックスレイアウトは垂直方向と水平方向の中央揃えを簡単に実現できるため、多くの利点があり、モバイル端末で広く使用されています。欠点は、ブラウザの互換性が低いことです。コードは次のとおりです。

//html
<div class="main">
  <div class="middle"></div>
</div>
 
//css
。主要 {
  幅: 60ピクセル;
  高さ: 10%;
  背景: #dddddd;
  display: flex; //flexに設定
  justify-content: center; // 水平中央 align-items: center; // 垂直中央}
。真ん中{
  幅: 30%;
  高さ: 50%;
  背景: 赤;
} 

要約する

上記は、私が紹介した CSS で垂直方向の中央揃えを実現するいくつかの方法の要約です。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。

<<:  無視されたDOCTYPE記述の分析

>>:  シェルスクリプトは、Docker の半自動コンパイル、パッケージ化、およびリリースアプリケーション操作を構築します。

推薦する

MySQL が my.cnf を読み込む順序の詳細

目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...

JSで実現したページサイドバーの効果に関する研究

目次発見: ディスプレイアニメーションの応用実装:記事の1行目を表示する効果を実現する方法実際、その...

Javascriptはセキュリティ検証に整合性属性を使用します

目次1. スクリプトタグを使用してファイルをインポートする1. ローカルファイルをインポートする2....

レスポンシブなアコーディオン効果を実現するための CSS3 の詳細な説明

最近、外国人が CSS3 を使用してアコーディオン効果を実現しているビデオを見たので、自分で学習した...

MySQL のインデックスとデータ テーブルを管理する方法

目次テーブルの競合を見つけて修正するインデックス統計の更新テーブルの競合を見つけて修正するデータ テ...

js キャンバスはスライダー検証を実現します

この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...

Docker Machineの詳細な説明

Docker と Docker Machine の違いDocker はクライアント サーバー アーキ...

キーボード上の各種特殊記号の英語読み方(知識の普及)

キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...

IDEA が Docker を統合してリモート展開を実現するための手順

1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...

MySQL 単一テーブルクエリの例の詳細な説明

1. データを準備するこのテーブルでは次の操作が実行されます 学生テーブルを作成 ( id int ...

11 の素晴らしい JavaScript コード リファクタリングのベスト プラクティスの概要

目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...

データベースの冗長フィールドを合理的に使用する方法

privot は、多対多の関係の中間テーブルです。 PT5 フレームワークは自動的に privot ...

Apache Spark 2.0ジョブは完了するまでに長い時間がかかります

現象Apache Spark 2.x を使用すると、Spark ジョブがすべて完了しているにもかかわ...

JavaScript の基礎: 即時実行関数

目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...

Windows 10 での MySQL 8.0 のダウンロードとインストール構成のグラフィック チュートリアル

この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...