【勉強メモ】CSS 上下左右中央揃え

基本の３パターン

・インライン要素を中央揃えにする(text-align: center;)
・ブロックレベル要素を中央揃えにする(margin: 0 auto;)
・フレックスボックスを使って中央揃えにする(justify-content: center;)

出典1　めっちゃわかりやすい：https://koshian-toast.com/margin-auto/

★前提
インライン(コンテンツ)要素＝ブロックの中身
ブロックレベル＝外枠
フレックスボックス＝別の考え方
　　→フレックスコンテナ(親)の中にフレックスアイテム(子)がある

インライン要素

左右中央　text-align: center;
上下中央　vertical-align: middle;
を中央揃えにしたいインライン要素につける。
ブロックの中でインラインコンテンツが中央になる。
出典３

text-alignがつかない！！

「text-align」を指定する要素と実際に位置が決まる要素が別だからだと考えられます。

「text-align」はブロック要素に指定します。
そうすることで、その中のインライン要素の水平方向の位置を決めることができます。

「ブロック要素内のインライン要素」であるか
まず確認していただきたいのは、指定したいものが「ブロック要素内のインライン要素」であるかということです。
繰り返しにはなりますが、「text-align: center;」はブロック要素に指定をし、そのブロック要素内のインライン要素の位置を決めます。

言い換えてみると「ブロック要素内のインライン要素」以外には、text-align: center;は効きません。

中央寄せにするためには様々な指定方法あり、要素に合わせて使い分ける必要があります。
今回のtext-align: center;はブロック要素そのものには使うことができないため、次の章を参考にしてください。

https://web-camp.io/magazine/archives/27392#a

positionを使った例

position: absolute;
top: 45%;
left: 0;
right: 0;
text-align: center;

https://code-step.com/store-code/

ブロック要素

左右中央　margin: 0 auto;

を中央揃えにしたいブロック要素につける。
全体の中でブロックレベルが中央になる。

Flexbox

1.困ったらこれ

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

親につける！！！
text-alignを使わなくても、親を作って(divとか)付ければテキストにも使える。　出典2

justify-content: center;にて縦方向の中央、align-items: centerで横方向中央に位置づけます。

出典３：https://www.esz.co.jp/blog/2847.html

2.別バージョン

.container {
  display: flex;
}

.box {
  margin: auto;
}

container＝親　　box＝子
注意点：親要素と子要素の両方にスタイルを設定する必要がある。
インライン扱いの要素には適用できないため、ブロック扱いの要素に変更が必要。　出典2

番外編　

display: grid;　フレックスではないけど、似た感じで使えて便利！

.container { 
　　 display: grid; 
  place-items: center;
}

出典2
縦方向に中央揃えしたい時など、flexbox以外の選択肢として使える！
こちらを参照　https://web-de-asobo.net/2021/11/29/vertical-center/

display: table;

display: table; 
margin: 0 auto;

「display: table;」と「margin: 0 auto;」で中央に配置。
※テキストの長さに応じて可変で中央配置できる。
出典：https://code-step.com/photo2-code/

最後にチートシート↓

Flexboxのチートシート紹介とその使い方

出典２：https://ics.media/entry/17522/　
出典３：https://proengineer.internous.co.jp/content/columnfeature/6343