センタリングの方法

皆さんが、デザインを作成する上で、意外と迷われるのがセンタリングです。
「センタリングの設定をしたんだけど中央に寄ってくれない」という相談をよく受けます。
何故上手くできないのか、何故迷うのか..
それはインライン要素とブロック要素の仕組みをわかっていないからです。

インライン要素の事を私は「文字タイプ」という説明をします。
ブロック要素の事は、「BOXタイプ」という言い方をします。
何がインライン要素で、何がブロック要素なのか、は
 「インライン要素とブロック要素について」にて説明しております。

この、「文字タイプ」か、「BOXタイプ」か、によってセンタリングの方法は変わってくるのに、どちらでも同じだと思ってる事が、上手くできない理由の一つであり、迷う理由です。

1.文字タイプ(インライン要素)の場合

外側のBOXに「text-align: center;」を設定する
・文字がセンターに寄る
・BOXはセンターには寄らない

【裏テクニック】
インライン要素に対し、「display: block;」を適用すると、ブロック要素に変換する事ができる。
そうすると、下記「2.」の方法が使えるようになり、余分なdiv要素が必要なくなる

2.BOXタイプ(ブロック要素)の場合

そのBOX自体に横幅(width)を指定し、「margin: 0 auto;」を設定する
・そのBOXはセンター揃えができる
・文字タイプ(インライン要素)はできない

3.flexbox(「display: flex;」を使ってる)の場合

display: flex;」を使っている要素に「justify-content: center;」を設定する
・そのBOX内の子要素全体が中央に寄る