要素を中央に持っていく方法

まとめ

2022.12.18

今回はCSSで要素を中央に持っていく方法を紹介します。

テキストだけ中央に寄せる

テキストだけを中央に持ってくるのはすごく簡単で、中央にしたいテキストの要素に
text-align: center;
を入れると簡単にテキストだけが真ん中に行きます。

要素だけを中央に寄せるにはまずwidthで横幅を指定します。

次にmarginをautoに指定すると中央に要素だけが移動してくれます。

中央にしたい要素の外側の要素にdisplay: flex;を挿入し、justify-content: center;を挿入すると中央配置になってくれます。

flexではさらに、align-items: center;を追加すると縦の中央配置になります。

positionでも要素の移動は可能です。しかし、だいたい真ん中ぐらいに持って行けるのですが画面サイズによってずれてしまうことがほとんどです。なので、出来るだけpositonは使わずにやれる方がいいです。

今回は3つの方法をご紹介しました。是非参考にしてみてください。