CSS 垂直センタリングの代替実装コードの詳細な説明（非従来型）

序文

ご存知のとおり、「CSS で要素を垂直方向に中央揃えするにはどうすればよいか」という質問は、すでによく寄せられる質問です。この問題には多くの解決策があります。これらの解決策には、それぞれ適用可能なシナリオと長所と短所があり、おおよそ次のようになります。

フレックスレイアウト
グリッドレイアウト
テーブルレイアウト
高さのある行の高さ
マージンのあるポジション
変換による位置
...

そこで今日は、効果的だがあまり一般的に使用されていないソリューションの 1 つである、疑似要素:before vertical-align:middleと組み合わせて要素の垂直方向の中央揃えを実現するという原理を理解します。具体的なコード実装を見てみましょう。

<スタイル タイプ="text/css">
  。親 {
    表示: インラインブロック;
    幅: 300ピクセル;
    高さ: 300px;
    フォントサイズ: 0;
    背景: #80848f;
    テキスト配置: 中央;
  }
  .parent:before {
    表示: インラインブロック;
    幅: 20px;
    高さ: 100%;
    コンテンツ： '';
    背景: #ff9900;
    垂直位置合わせ: 中央;
  }
  。子供 {
    表示: インラインブロック;
    幅: 50px;
    高さ: 50px;
    背景: #19be6b;
    垂直位置合わせ: 中央;
  }
</スタイル>

<div class="parent">
  <div class="child">子</div>
</div>

上記のコードを実行した結果は次のようになります。

皆さんはすでにこのコードに精通していると思いますが、その背後にある原理を本当に理解していますか?次に、垂直方向のセンタリングを段階的に実現する方法を見てみましょう。

分析する

まず、重要なポイントを知っておく必要があります。つまり、親要素のベースラインの位置は固定ではなく変更可能であるということです。これを覚えておくことは非常に重要です。次に、コードを簡素化して重要な部分を削除しましょう。

<スタイル タイプ="text/css">
  。親 {
    表示: インラインブロック;
    幅: 300ピクセル;
    高さ: 300px;
    /* フォントサイズ: 0; */
    背景: #80848f;
    テキスト配置: 中央;
  }
  .parent:before {
    表示: インラインブロック;
    幅: 20px;
    高さ: 100%;
    コンテンツ： '';
    背景: #ff9900;
    /* 垂直位置揃え: 中央; */
  }
  。子供 {
    表示: インラインブロック;
    幅: 50px;
    高さ: 50px;
    背景: #19be6b;
    /* 垂直位置揃え: 中央; */
  }
</スタイル>

<div class="parent">
  <div class="child">子</div>
</div>

font-size:0とvertical-align:middleコメントアウトすると、実行結果は次のようになります。

図から于:before場合、vertical-align:middle を追加しても追加しなくても結果は同じであることがわかります。常に親要素を垂直方向に埋めます。しかし、.child 要素の場合は状況が異なります。垂直位置が変わっています。なぜでしょうか。
実際、ここでの疑似要素の役割は、親要素のベースラインの位置を変更（または再定義）することです。MDN ドキュメントのvertical-align:middleの定義を確認しましょう。

middle: 要素の中央を親要素のベースラインと親要素のx-heightの半分に揃えます。

それでは、次の例を比較してみましょう。

疑似要素の中央は垂直方向の中点であり、理解するのは難しくありません。
今のところ、親要素のベースラインがどこにあるかは気にしません。変更できることを覚えておけば十分です。
x-heightの半分。親要素のfont-size 0に設定しているため、 x-height （小文字のxの高さ）の半分も0、つまり高さがない。

x-height : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : vertical-align:middle : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : vertical-align:middle : : : : : : : : : : : : : : : : : : : : : : : : : font-size x-height : : : : : : : : :

要約する

実際、この垂直センタリング方法の原理は主に次の点にあります。

CSSの要素はデフォルトで左上に揃えられます
疑似要素の高さは親要素と一致している
親要素はフォントサイズを0に設定し、したがってx高さも0に設定されます。
親要素のベースラインの位置は変更可能です

CSS 垂直センタリングの代替実装に関するこの記事はこれで終わりです。CSS 垂直センタリングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JS でオブジェクトを作成する 4 つの方法

>>: ウェブページ（ウェブサイト）のデザインと制作に関する考えや経験の共有