CSS :絶対的な中心要素回答Re :なぜ、Rellatey(- 50 %)は、トップである要素を中心に必要ですか?

3528 ワード
css テキストリンク
TLDR
位置に要素を中心に学んでください:その親の絶対内部.

導入


おそらく、「RAD CSS Flexboxを使わない理由」と考えてください.そして、あなたは正しいです!ほとんどすべてのケースでdisplay: flex 仕事といくつかの不要な頭痛から脱出することができます.
しかし、遅かれ早かれ、システムをハックし、貧しい要素を使用する必要がありますposition: absolute . 次に、多分それは少しトリッキーだことを理解します.
私はあなたを救うためにここにいる‍!

👎 間違った方法


あなたのお気に入りのコードエディタ(VSは私のもの)を開き、ショーを開始!
.centered {
    position: absolute;                                 
    left: 50%;
    top: 50%;
}
あなたは最終的な結果を見てまであなたのAwesomenesについて非常に興奮している!

だめ!ゴッドダムノー!DATのことは方法が中心です!
そして、なぜあなたが最初にコーディングを開始したのか不思議な時期です.しかし、好奇心が欲求不満の上で起こるように、あなたは疑問を始めます:「なぜ、それは起こっていますか?」

👍 正しい方法


あなたと、明らかに、私は(最初の問題を中心に)ときに重要な詳細を逃している!
2次元平面を考慮すると、座標系の中心点(0,0)は、要素の中心ではありません.それは左上隅です!今、アイテムがなぜ最初からセンターから遠くに見えたかは、より明確でなければなりません.
しかし、どのようにそれを変更できますか?それはcinchであり、私はあなたに適切な方法を示すつもりです.

キーポイントは、x軸(水平)上の要素の幅の半分とy軸(垂直)上の要素の高さの半分を減算することです.次に、要素を親の中に絶対的に集中させる必要があります.
.centered {
    position: absolute;                                 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
CSSの実装も簡単ですtranslate() 関数.

The translate() function repositions an element in the horizontal and/or vertical directions.


したがって、translate(-50%, -50%) あなたは21文字だけを使用して不要なオフセットを削除しました.すごい!👏

結論


Flexboxモジュールがオプションでない場合、position プロパティ.
正直に言うと、私は本当に私の要素を中心にいくつかのより厄介な方法を学ぶために好奇心旺盛です.以下のコメントセクションでどのように我々に教えてください👇
【Rails】 5分でApexChart.jsを導入する方法
[クローンエンコーディング]データベースの作成