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