ページの要素を集中する

CSSを使用してページに要素を集中させる方法は間違いありませんが、ここでは簡単で実装が容易な2つの異なるテクニックを紹介します.あなたは、ページの真ん中にログインボックス、または情報メッセージなどを集中するためのこれらのテクニックを使用することができます.

実装

夫婦を組むdiv s、次のようにページに定義しました.

<div class="centered1">I am centered div 1.</div>
<div class="centered2">I am centered div 2.</div>

これらについて特別なことはないdiv 彼らはクラスを持っているcentered1 and centered2 それぞれ.

テクニック1

クラス.centered1 は、div そして、ページの左側から50 %を上から50 %表示するように設定します.の余白div をmargin: -200px 0 0 -250px; . 以来div 500 px全体と400 pxの幅であり、このマージンは、それがページの中央に表示することをdiv 250 px左と200 pxを動かす効果を持っています.

.centered1 {
    position: absolute;
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    background-color: goldenrod;
    margin: -200px 0 0 -250px;
}

テクニック2

第2のテクニックは最初とほとんど同じですが、今回はmargin 位置するdiv ページの真ん中に.
以前のように、私は位置を設定しましたabsolute そしてdiv 幅と高さ.私は、セットしましたtop and left の左上隅を移動するにはdiv 画面の中央に.
最後に、私はセンターの中心部を移動するために変換を使用しますdiv ページの中央にある.transform: translate(-50%, -50%); . 再び、その結果、コンポーネントが画面の中央に表示されます.

.centered2 {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}

更なる考え

ここでは、2つの簡単なテクニックを示しました.私はおそらくFlexboxやグリッドのレイアウト、またはおそらくいくつかの他の方法を使用して同じ効果を作成している可能性があります.あなたが使うどんな異なる技術でもあるならば、下記のコメントを残してください.

謝辞

写真でThought Catalog on Unsplash