垂直方向の中央揃えをエレガントに実現する方法を教えます(推奨)

垂直方向の中央揃えをエレガントに実現する方法を教えます(推奨)

序文

CSS で水平方向と垂直方向に中央揃えする方法はたくさんあります。この記事で紹介する方法は非常に包括的で詳細です。これらは、参考と学習のために共有されています。以下の詳細な紹介を見てみましょう。

「人類が月に着陸したのは 44 年前ですが、CSS で何かを垂直方向に中央揃えすることができません。」 --Jams Anderson

Web デザインで中央揃えを行う場合、最も重要なことは、要素をその親要素の中央に配置することです。単純に聞こえますが、さまざまな可能性を考慮しましたか?

シンプル: 幅と高さがわかっている要素

要素の幅と高さの両方がわかっていて、その要素を親に対して垂直方向に中央揃えにしたい場合は、絶対配置を使用すると良いでしょう。


幅と高さがわかっている要素

主要{
    位置: 絶対;
    top: calc(50% - 3em); //親要素の高さの50%と自身の高さの半分だけ上に移動します left: calc(50% - 9em); //親要素の幅の50%と自身の幅の半分だけ左に移動します width: 18em;
    高さ: 6em;
}

上級: 幅と高さが不明な要素

しかし、ページ上の多くの要素の幅と高さは不明です。


幅と高さが不明な要素

絶対位置に基づいて拡張します。

translate() 関数を使用してパーセンテージ値を計算する場合、変換と移動は要素自体の高さと幅に基づいて行われます。

translate() 関数は、位置の相対的な指定と同様に、要素を指定された方向に移動できます。簡単に言えば、translate() 関数を使用すると、X 軸または Y 軸上の Web コンポーネントに影響を与えることなく、要素を元の位置から移動できます。

したがって、パーセンテージベースの CSS 変換を使用して要素をオフセットする限り、コンパイルされたコードで要素のサイズをハードコードする必要はありません。

主要{
    位置: 絶対;
    上位: 50%;
    左: 50%;
    変換: translate( -50%, -50% );
}

絶対位置指定は適していません

絶対位置指定を使用しない場合は、translate() を使用して要素の幅と高さを半分だけ移動できます。

余白を使用して動きの効果を実現できます。

主要{
    幅: 18em;
    パディング: 13m 1.5em;
    margin: 50vh auto 0; //外側の余白はvhを単位として使います。マージンのパーセンテージ値は親要素の幅を基準として解釈されるので、ここではvhが使われます。
    変換: translateY( -50% );
}

テーブルベースのレイアウト

CSS テーブルは良い選択かもしれません。

テーブルは通常のブロックレベル要素のようにレンダリングされないためです。たとえば、要素の幅が 100% の場合、テーブルは実際のコンテンツの幅のみを占有しますが、デフォルトのブロックレベル要素は自動的に親要素の 100% を占有します。

<テーブルスタイル="100%">
    <tr>
        <td スタイル="text-align: center; vertaical-align: center">
            垂直に中央に配置されました!
        </td>
    </tr>
</テーブル>

ページの意味を考慮すると、次のようにすることができます

.何か意味のある{
    表示: テーブル;
    幅: 100%;
}
.他の意味 {
    表示: テーブルセル;
    テキスト配置: 中央;
    垂直位置合わせ: 中央;
}

インラインブロック

疑似要素の使用も検討できます。
疑似要素が親要素の高さの 100% を占めるようにする場合は、疑似要素と垂直方向に中央揃えにする要素の両方を vertical-align: center に設定します。

すると、垂直方向の中央揃え効果が得られます。

これは比較的ハッキーな方法です。

。ブロック {
  テキスト配置: 中央;
  空白: ラップなし;
}
 
/* 高さを 100% まで拡張します */
.block:before {
  コンテンツ: '';
  表示: インラインブロック;
  高さ: 100%;
  垂直位置合わせ: 中央;
  margin-right: -0.25em; /* 間隔を調整します */
}

/* 垂直方向に中央揃えされる要素の幅と高さは任意です*/ 
.centered {
  表示: インラインブロック;
  垂直位置合わせ: 中央;
  幅: 300ピクセル;
}

Flexboxベースのソリューション

Flexbox を使用すると、通常、子要素のレイアウトをより適切に操作できます。次に例を示します。

  • 要素コンテナーに十分なスペースがない場合は、各要素の幅を計算せずに同じ行に設定できます。
  • 1 つの列に簡単にレイアウトできます。
  • コンテナの左、右、中央などに揃えると便利です。
  • 構造を変更せずに表示順序を変更できます。
  • 要素コンテナーがパーセンテージに設定され、ビューポートのサイズが変更された場合、コンテナー内の各子要素にコンテナーの幅または高さの比率が自動的に割り当てられるため、要素の正確な幅を指定しないことでレイアウトが崩れることを心配する必要はありません。

それは間違いなく最善の解決策です。 Flexboxはこのようなニーズに合わせて特別に設計されているからです😄

体{
    ディスプレイ: フレックス;
    最小高さ: 100vh;
    マージン: 0;
}
主要{
    マージン: 自動;
}

中央揃えの要素内のテキストも中央揃えにする必要がある場合:

主要{
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
    幅:18em;
    高さ: 10em;
}

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。

参照:

  • CSS の謎を解く
  • http://css-tricks.com/centering-in-the-unknown
  • CSS 変換: http://w3.org/TR/css-transforms
  • CSS の値と単位: http://w3.org/TR/css-values
  • CSS フレックスボックスレイアウト: http://w3.org/TR/css-flexbox

<<:  JavaScript の構成と継承の説明

>>:  モバイルレイアウト用の動的REMの実装

推薦する

jsネイティブウォーターフォールフロープラグイン制作

この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...

CentOS8でのnmcliの使い方の詳しい説明

RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...

Dockerコンテナのエクスポートとインポートの例

目次DockerコンテナのエクスポートDockerコンテナのインポ​​ートこの記事では主に、コンテナ...

Idea は、Web プロジェクトを開始するように Tomcat を設定します。グラフィック チュートリアル

tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...

マークアップ言語 - Web アプリケーション CSS スタイル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

binlog2sql と簡単なバックアップおよびリカバリを使用して mysql8.0.20 を構成するための詳細な手順

目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...

Mongodb の GUID 表示の問題の詳細な分析

問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...

つまり、フィルターコレクション

IE は開発の初期段階では頭を悩ませましたが、他のブラウザとは異なります。他のブラウザがサポートして...

CSS のフィルター属性とバックドロップフィルターの適用と違いの詳細な説明

フィルターとバックドロップフィルターにはいくつかの違いがあります。フィルターは現在の要素だけでなく、...

CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法

問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...

レイアウトサイズを変更するために左右にドラッグする純粋なCSS

ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...

HTML テーブル マークアップ チュートリアル (16): タイトルの水平方向の配置属性 ALIGN

デフォルトでは、表のタイトルは水平方向に中央揃えされます。ALIGN 属性を使用して、タイトル テキ...

docker を使用して Windows 10 Home バージョンで Laravel 開発環境を構築する方法の詳細なチュートリアル

オペレーティング·システム: Win10 ホームエディションDockerをインストールします:公式サ...

HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...

HTML CSS の 3 つの一般的なスタイル セレクター

1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...