CSSの各種センタリング方法

cssの水平方向中央揃え text-align:center と margin:0 auto

これら 2 つのメソッドは、水平方向の中央揃えに使用されます。前者は親要素に設定され、後者は子要素に設定されます。これらが機能するための最初の条件は、子要素が float の影響を受けないことです。そうでない場合は、すべてが無駄になります。 margin:0 auto

は margin:0 auto 0 auto と書くこともできます。理解できない子供は、CSS の略語に関する情報を自分で探すことができます。

垂直中央の行の高さ

え？ ！垂直方向のセンタリングではマージンが機能しませんか?これは明らかに当てはまります。使用できるのは margin:0 auto だけであり、auto 0 は使用できません。 line-height については、親要素にも作用し、その値が親要素

の高さの値と等しい場合、内部テキストは自動的に垂直方向の中央に配置されます。これは単なるテキストのようで、残念です。

普遍的な位置法

この方法はまさに普遍的であると言えます。要素を中央に配置できないことに悩んでいる場合、ほとんど副作用なく思い切って使用できます。フロントエンド エンジニアが在宅で移動するために必要な手段の 1 つであることは間違いありません。

具体的な方法は非常に簡単です。まず、親要素にposition:relativeを書きます。これは、子要素がposition:absoluteでマークされている場合に、外側の空間に配置されないようにするためです。次に子要素の高さと幅を書きます

一部のブラウザでは解析時にこの2つの値がないと予期せぬズレが発生します。次に、メソッド全体の核心である、top: 50%; left: 50%、および margin-top: 高さの値の半分である負の数

margin-left: 重みの値の半分である負の数。整理したら、子要素に次のようにCSSを記述します（もちろん、親要素も最初にwidthとheightを書く必要があります）

{width:100px;height:80px;position:absolute;top:50% ; left:50%;margin-left:50px;margin-top:40px}

次に、ページを更新します。子要素はすでに中央に配置されています。

このメソッドを使用する利点は、コンテンツの形式に関係なく、すぐに中央に配置できることです。欠点は、要素に特定の幅と高さの値が必要であることです。そうでない場合は、いくつかの小さな処理が必要になる可能性があります。 JavaScriptによる計算。