せんせー、文字とか画像とかを真ん中に配置する方法がよくわからねぇ、、
そら
せんせい
中央揃えだね。中央揃えはよく使うから使いこなせるようにした方がいいね。
中央揃えって言うのか。。なんか要素によって真ん中になったりならなかったりするから余計にややこしいんだよな、
そら
せんせい
そうだね。中央揃えにする要素の種類によって使うコードが違うから少し混乱してしまうんだ。その辺も含めてこれから説明するね。
はーい。ありがとせんせ！
そら
目次
要素がブロック要素かインライン要素か
中央揃えをする前に要素を「ブロック要素」と「インライン要素」の二種類に分類する必要があります。ブロック単位で存在する要素を「ブロック要素」といい、さらに細かい単位で存在する要素を「インライン要素」といいます。これだけだと全然わからないと思いますので例を挙げて説明します。
よく使うものを載せていますが、ほとんどがブロック要素ですね。「ほとんどブロック要素と考えていいのか」と思った方、それは違います。実はブロック要素でもcssでインライン要素に変化することはできるんです。しかもこれは便利なので結構使います。なのでこの辺にも注意しながらブロック要素とインライン要素を判別する必要があります。
ちなみにブロック要素をインライン要素に変更した時のコードはこちらです。
See the Pen gsap-4 by 近野智優 (@bplqliga-the-bashful) on CodePen.
それでは実際に中央揃えにしていきましょう。
要素を中央揃えにする方法
実際に中央揃えにしていきたいと思います。 ブロック要素の方法とインライン要素の方法に分けて説明していきたいと思います。
ブロック要素の中央揃えの方法
divタグやpタグなどが対象になっているのでやはり基本的によく使うのはこちらだと思います。そしてブロック要素の中央揃えの方法は２種類あります。
1,「margin:0 auto」
ブロック要素の中央揃えの方法１つ目は「margin:0 auto」にすることです。
See the Pen css-1 by 近野智優 (@bplqliga-the-bashful) on CodePen.
どういう時にこの方法を使うかというと「中央揃えにしたい要素が一番外側の枠の時」ですかね。一番外側のdivやulなどを中央揃えにしたい場合はこちらがかなり使いやすいですが、その中に包容されている要素（divの中のdivなど）の場合は次に説明する方法を使った方がいいです。
2,「display:flex」
ブロック要素の中央揃えの方法2つ目は「display:flex」にすることです。
See the Pen css-2 by 近野智優 (@bplqliga-the-bashful) on CodePen.
「display:flex」は親要素であるflexboxの中に包容されているflexitemに対してコードが適応されます。中央揃えの場合、flexboxの中央にflexitemが配置されるような形です。なので親要素となる枠が必ず必要になります。それさえあればほとんど「display:flex」で解決できるので基本的にこちらを使うことが多いです。
ちなみにこれは要素が単体でも問題なく適応されます
See the Pen css-3 by 近野智優 (@bplqliga-the-bashful) on CodePen.
そして「display:flex」は配置系のcssでは超万能であり、中央揃えだけでなく他にも色々な並び方ができるので絶対にマスターしてください！
「display:flex」の使い方マニュアルはこちらの記事で紹介していますのでぜひ参考にしてみてください。
インライン要素の中央揃えの方法
インライン要素の中央揃えはとても簡単です。cssにコードを１つ記述するだけです。
1,「text-align:center」
インライン要素の中央揃えの方法は「text-align:center」にすることです。
See the Pen css-4 by 近野智優 (@bplqliga-the-bashful) on CodePen.
はい、とても簡単です。例えばdivをインライン要素にした場合にもこれで中央揃えにすることができます。
注意
- ただし、この場合は中央揃えにしたい要素の親要素に対して「text-align:center」を適応させる必要がある
はい、こんな感じでブロック要素とインライン要素の中央揃えの方法でした。よく使うのでもしこの記事が分かりやすかったらいつでも見れるようにブックマークに入れておくことをおすすめします。
また繰り返しにはなりますが「display:flex」についての知識がまだ浅い方は絶対こちらの記事を見ることをお勧めします。（本当にdisplay:flexはかなり使うので）
