理解:before擬似クラスとvertical-align:middleを組み合わせて垂直中心を実現する原理

前言

よく知られているように、「Cssはどのようにして要素を垂直に中央に配置しますか?」すでにありふれた問題であり、この問題には現在多くの解決策があり、これらの案にもそれぞれ適用されるシーンとメリットとデメリットがあり、大体以下のようになっています.

flexレイアウト

gridレイアウト

tableレイアウト

line-heightコーディネートheight

positionコーディネートmargin

positionコーディネートtransform

...

では、今日は有効だがあまり使われていないスキームの原理を理解します.これは、偽要素:beforeとvertical-align:middleを組み合わせて要素を垂直に中央に配置し、まず具体的なコード実装を見てみましょう.

  
child

上記のコードの実行結果は次のとおりです.
コードはみんなよく知っていると信じていますが、あなたは本当にその原理を理解していますか?次に、垂直中心をどのように一歩一歩実現するかを見てみましょう.

ぶんせき

まず、親要素ベースラインの位置が変更可能であり、固定されていないことを覚えておくことが重要です.
次に、コードを簡素化し、重要な部分を取り除きます.

  
child

font-size:0とvertical-align:middleを注記した結果、次のようになります.
図から明らかなように、:beforeの擬似要素(以下、擬似要素と略称する)にとって、vertical-align:middleを加えないか、加えないかは同じであり、結果は垂直方向に常に親要素を占めている.しかし、.child要素の場合は異なり、垂直方向の位置が変わったのはなぜですか.
ここでの擬似要素の役割は、親要素baselineの位置を変更(または再定義)することです.MDNドキュメントでのvertical-align:middleの定義を振り返ってみましょう.
middle:要素の中央を親要素のベースラインに親要素x-heightの半分を合わせる
では、私たちの例を比較してみましょう.

擬似要素の中部はその垂直方向の中点であり、

は理解に難くない.

親要素のベースラインはどこにあるかはともかく、変更可能であることを覚えておけば十分です.

x-heightの半分は、親要素でfont-sizeを0に設定するため、x-height(小文字x文字の高さ)の半分も0であり、高さ

はありません.
このように、擬似要素に相当する中点は、親要素のベースラインと整列すればよい.x-heightは0であるため、加算しなくても構わない.加えてCssの要素のデフォルトは左上揃えで、この制限に対して、つまり偽要素にvertical-align:middleを加えると、デフォルトでは親要素の範囲を超えて表示されません.この場合、偽要素の高さは親要素の高さの100%、中点も決定されます.
次に偽元素は親元素に言います:私の垂直方向の中点はすでに確定して、変わることは不可能で、一生すべて変わることはできなくて、しかし私の中点はあなたのベースラインと位置合わせしたいので、あなたは自分で見てやりましょう
親エレメントは妥協し、それ自体のベースラインを偽エレメントの中点に水平に位置合わせされた位置に移動します.この親エレメントのベースラインの位置も決定され、その高さの半分に近いです.
最後にchild要素は独自のvertical-align:middleを追加し、middle:要素の中部と親要素のベースラインに親要素x-heightの半分を位置合わせするという定義に従う.child要素のfont-sizeは継承関係も0であるため、その中点も自然にすでに決定された親要素のベースラインに位置合わせされ、垂直中心を実現し、これで終了する.

まとめ

実はこの垂直中心方式の原理には主に以下のいくつかの要点があります.

Cssの要素のデフォルトは左上揃えの

です.

擬似要素の高さは親要素と統一されている

親要素はfont-sizeを0にし、x-heightも0

にする.

親要素ベースラインの位置は、

を変更することができる.
原理を理解すれば、私たちはハードバックコードを死記する必要はなく、どのように実現するかを忘れません.文の中に間違いがあれば、指摘を歓迎します.
原文住所:https://guoyunfeng.com/2019/1...