CSSで中心要素をどのように

CSSで中心的なものを知る方法は、ウェブ開発者として我々の日のために非常に必要です.同じことを達成するためにいくつかの方法がありますので、私たちを混乱させることができます.今日、我々はどのように水平方向、垂直方向、両方の(水平方向と垂直方向に)完全に応答することを学ぶつもりです.
私たちは2つのdivs、1つは親要素、もう一方は子として働きます.

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

水平

元素を中心とするdisplay: block; 固定幅を必要とします.なぜなら、すべての利用可能な幅をとるか、失敗してからdisplay: inline-block;
メソッドマージンオート
自動的にマージンを左から右に与え、それは自動的に水平方向に要素を中心に完全に応答します.

.child {
    margin: 0 auto;
}

flexboxの使用
FlexboxはCSS内のより便利な機能です.私たちはレイアウトのためにそれをたくさん使用します.私たちはjustify-content 我々の目標を達成するために、親要素で.そして、それも反応します.(デフォルトでflex-direction is row したがって、すべての子要素は水平方向の行に配置されますflex-direction: column; )

.parent {
    display: flex;
    justify-content: center;
}

垂直

垂直方向の項目を中心に混乱しているので、それを正しく取得する方法を見てみましょう.

flexbox (再び):
現在使用する代わりにjustify-content 私たちはalign-items .

.parent {
    display: flex;
    align-items: center;
}

3 .両方(水平および垂直)

水平と垂直の両方のセンタリング要素は非常に満足している.私たちはほとんど常に物事をセンターにしたいので、2つの方法を見てみましょう.

flexbox ( yes again ):
私たちが見たように、Flexboxは、水平方向と垂直方向の両方の中心のものに私たちを助けるので、私たちが置く場合justify-content and align-items 一緒に?

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

グリッドの使用
これはポストと最速の最後の方法です.それは私のお気に入りです、我々はコードのわずか2行で要素を中心にすることができます!

.parent {
    display: grid;
    place-items: center;
}

結論

を使用するなど、同じように達成する多くの方法がありますposition , 遊びpadding and margin . それは一般的に我々が使用する方法の状況に依存しますが.私は、それがコードの我々の線を減らすいろいろな方法で我々を助けるので、flexboxと格子を学ぶことを勧めます.あなたが助けると思う誰にでも、このポストを共有してください.