フローティングバナー
NO IMAGE

CSSで上下左右中央揃えにするにはこの「3行」!Flexboxを活用しよう

  • 2023年4月3日
NO IMAGE
この記事の監修者

CSS初心者の方は、要素を中央寄せにする方法に手間取ることがあります。
text-align:centerが効かない
width:100%;margin:0 autoもダメ
そんな時は「Flexbox」を活用しましょう!
コピペで今後のWeb制作に活用してみてください!

使用方法
親コンテナにdisplay:flexをかけ、
justify-content: center;
align-items: center;
を加えるだけです!

See the Pen
Flexbox上下左右中央揃え
by yoshinariokamura@gmail.com (@yoshinariokamura)
on CodePen.

ちなみに、
縦方向のみ中央揃えをかけたい場合は、align-items: center;のみを

See the Pen
Flexbox上下中央揃え
by yoshinariokamura@gmail.com (@yoshinariokamura)
on CodePen.

横方向のみ中央揃えをかけたい場合は、justify-content: center;のみを

See the Pen
Flexbox左右中央揃え
by yoshinariokamura@gmail.com (@yoshinariokamura)
on CodePen.

簡単ですね!
初心者の方は、中央揃えにする方法が多くて混乱しがちです。
教わる人の影響もあるかと思いますが、この方法が一番簡単ですので是非覚えておきましょう!

未分類の最新記事8件