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

序文

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