2分で読める！【CSS】要素を中央に寄せる方法 3つ

本日のテーマは

要素を中央に寄せる方法3つです！

要素を中央に寄せる方法3つ

要素を中央に寄せる方法は3つです！

パターン①：justify-content:center;

パターン②：text-align:center;

パターン③：margin:0 auto;

それでは1つ使い方を見ていきます！

パターン①（justify-content:center;）

こちらのCSSはdisplay:flext;とセットで使うことが必須です。

ちなみにdisplay:flex;はインライン要素をブロック要素に

ブロック要素をインライン要素にするCSSです。

使用するタイミングは、

縦に並んでいる要素を横並びにしたい時などです。

パターン②（text-align:center;）

この方法が一番手っ取り早いかもしれません。

他にセットで指定しなければいけないCSSもないです。

パターン③（margin:0 auto;）

こちらのCSSは使用する際は

widthプロパティで要素の幅を指定しておきましょう。

なぜなら、要素の幅が画面横一杯になり左右に余白を取れなくなるからです。

通常、要素の幅は指定しなければ親要素の100％の長さになります。

その状態でmargin:0 auto;を使用しても

要素の幅は横一杯の100％なので左右に余白を取れなくなります。

余白が取れないので中央に移動することも出来ないというわけです。