HTML / CSS

即解決！CSSで中央寄せする方法【Flexboxが最強】

こんにちは、テルプロです！

「要素を上下中央寄せするには？」とお悩みではないでしょうか？

テルプロ

本記事ではそんな悩みを解決していきます！

本記事を読むことで
  1. 上下左右中央寄せのやり方がわかるようになる
  2. 上下中央寄せのやり方がわかるようになる
  3. 左右中央寄せのやり方がわかるようになる

Contents
  1. 上下左右中央寄せする方法
  2. 上下中央寄せする方法
  3. 左右中央寄せ
  4. まとめ

上下左右中央寄せする方法

See the Pen Untitled by terupro (@terupro) on CodePen.

ポイントは以下の3行です。

この3行を上下左右中央寄せにしたい要素の親要素に指定します。

  display:flex;
  justify-content:center;
  align-items:center;

上下中央寄せする方法

次に上下だけに中央に寄せたい場合です。

上下中央寄せにするには、先程の3行のうちの1つを消すだけでできます。

 display:flex;
 justify-content:center;

左右中央寄せ

最後に左右にだけ中央寄せしたい場合です。

左右中央寄せにするには、上下中央寄せにしたときに消していない方を消します。

 display:flex;
 align-items:center;

まとめ

今回は、「CSSで中央寄せする方法」をまとめました。

CSSで中央寄せにする方法は多くあるため、どうコーディングしようか迷うことがあるかと思います。さまざまな方法を覚えてしまうと、「これで中央寄せするんじゃなかったっけ。」と忘れてしまうことがあります。

私の場合、要素を中央寄せをする場合は基本的にこのやり方でやると決めています。そうすることで、思考時間を短縮でき、効率的にコーディングを進めることができます。

ぜひ参考にして見てください。

最後まで記事をご覧いただきありがとうございました！

ではまた！

#HTML/CSS
ABOUT ME
テルプロ
東京都在住のアプリエンジニア。大学では、ソフトウェア開発の研究に取り組む。長期のエンジニアインターンシップを経て、実務スキルを磨き、現在はフリーランスエンジニアとしても活動中。メインはモバイルアプリ開発。IT関連の記事監修も行い、技術の共有と普及に励んでいます。 執筆実績（レバテックフリーランス）
BLOG：https://terupro.net
Flutter関連の書籍を出版しました！

こんな記事もおすすめ