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 の半自動コンパイル、パッケージ化、およびリリースアプリケーション操作を構築します。

推薦する

Tomcat の設定と Eclipse での起動方法

目次Tomcat8のインストールと設定方法tomcat ダウンロードTomcat マネージャーを有効...

Vueフロントエンドの効率的な開発のためのレンダリング手順をリストします

v-for ディレクティブリストといえば、ループについても触れなければなりません。v-for 命令は...

6秒でMySQLに100万件のレコードを挿入する方法を教えます

1. アイデアMySQL に 1,000,000 件のレコードを挿入するのにたった 6 秒しかかかり...

vue+canvasでタイムラインを描く方法

この記事では、参考までにvueキャンバスのタイムライン描画の具体的なコードを紹介します。具体的な内容...

スケルトン スクリーンの読み込みプレースホルダー アニメーション効果を実装するための CSS + HTML (アニメーション付き)

効果上から下へフェードアウト ソースコードhtml、Angular構文を使用して、必要な構文を取得す...

TypeScriptのインデックスシグネチャの理解に関する簡単な説明

目次1. インデックス署名とは何ですか? 2. インデックス署名構文3. インデックス署名に関する注...

仮想スクロールを簡単に実装するためのVueサンプルコード

目次序文ローリング原理成し遂げるソースコード参照する序文モバイル Web ページの日常的な開発では、...

1 つの記事で JSON (JavaScript Object Notation) を理解する

目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...

Linux 上の Tomcat で MySQL にデータを挿入するときに中国語の文字化けが発生する問題を解決する

1. 問題Windows 上の Eclipse を使用して開発されたプロジェクトは Windows ...

既存のDockerコンテナの内容を変更する方法

1. Docker psはコンテナをリストします 2. Docker cpはコンテナにファイルをコピ...

アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します

目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...

js でシンプルなタブを実装する

タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...

色の16進数カラーコード表表示と16進値の比較表示で簡単に検索できます

さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

プロフェッショナルおよび非プロフェッショナルのウェブデザイン

まず、Web ページのスタイルの形成は、主に Web ページのレイアウト設計、ページの色処理、画像と...