HTML/CSS

【もう迷わない】CSSで上下左右に中央配置する方法まとめ

CSSを使って、要素を中央に配置する方法としてパッと頭に浮かぶのが「text-align:center」だったり、「margin:0 auto;」です。

ですが、上下の中央寄せが出てくると、ちょっと手が止まってしまう、、。プログラミング初心者にはあるあるだと思います。

そこで、CSSを使って上下左右に中央配置する方法をまとめてみました。

  • 左右の中央寄せ
  • 上下左右の中央寄せ

 

左右に中央寄せするCSS

これは基礎中の基礎だとは思いますが、おさらいのため解説していきます。

  1. text-align:center;
  2. margin:0 auto;

 

text-align:center;で中央寄せ

See the Pen
zVmEeq
by kei (@kei_01011)
on CodePen.

親のブロック要素に、text-align:center;を指定するだけで、中央寄せになります。

 

margin:0 auto;で中央寄せ

See the Pen
EBdwMg
by kei (@kei_01011)
on CodePen.

widthを指定するのを忘れがちですが、これは入れる必要があるみたいですね。

 

 

text-alignとmarginの違い

これは、Progateの初級でも学びましたが、おさらいです。

こんな感じで、簡単にまとめると以下のようになるので忘れないように。

  • ブロック要素 → margin
  • インライン、インラインブロック要素 → text-align

 

上下左右に中央寄せするCSS

  1. vertical-align:middle;
  2. transform
  3. flex

 

上下左右に中央寄せするCSSです。いろんなサイトのコーディングをしているわけではないので、まだまだ慣れませんが、パターンを知っておく事は大事だと思います。

これも、覚えておきましょう。

 

vertical-align:middle;で上下左右中央寄せ

See the Pen
JQmOdJ
by kei (@kei_01011)
on CodePen.

「vertical-align」は、インライン要素か、テーブルセルにしか使えないため、ここではテーブルセルを指定しています。

親要素にdisplay:table;

子要素にdisplay:table-cell;

 

transformで上下左右中央寄せ

positionを使ってtransformで位置調整をする方法です。

初めはチンプンカンプンで、理解が追いついていなかったのですが、ちづみさんのツイートで理解する事ができました。(わかりやすい!)

See the Pen
ewPezd
by kei (@kei_01011)
on CodePen.

これは中央寄せする要素の左上を起点にして、上から50%(top: 50%;)、左から50%(left: 50%;)の位置に移動します。

そして、要素の大きさの半分ずつを戻す(translate)、という動きになりますね。

 

flexで上下左右中央寄せ

See the Pen
EBdbgm
by kei (@kei_01011)
on CodePen.

以前にも記事にしましたが、flexboxを使えば簡単ですね。

ただし、全てがflexで賄えるわけではないので、いろんなパターンを知っておく事が大事だと思いました。

 

【flexbox】position要らず?要素の中央にテキストを配置する方法よく見るレイアウトで、背景画像の中央にテキストが配置されているデザインってありますよね。 コーディングに慣れた人なら、サクッと書い...