text-align と justify-content について

text-align:center; と justify-content:center;

cssを記述する際、要素を中央寄せにしたいとき、この二つのどっちを使えばいいのか、毎回わからなくなる。なので整理してみる。

text-align

text-align CSS プロパティは、
ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定します。
これは vertical-align と同じように機能しますが、水平方向に機能することを意味します。

justify-content

CSS の justify-content プロパティは、
フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、
中身のアイテムの間や周囲に間隔を配置する方法を定義します。

まとめ

text-alignであれば要素を中央寄せができて、justify-contentであればフレックス要素の中身の要素を中央よせ（つまりフレックス指定されている親要素に対する中央寄せ）ができる。

補足　vertical-align についてなど

vertical-align は CSS のプロパティで、
インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。

vertical-align はインライン要素、インラインブロック要素、
表のセル要素だけに適用されることに注意してください。
つまり、ブロックレベル要素の垂直方向の配置には使用できません。

高さを調整できるvertical-alignは、divなどのブロック要素には使えないということです。

htmlとcss、だいぶ扱えるようにはなってきたものの、理論的・意味的な部分がおざなりのままでした。今回のように、一呼吸おいて改めて調べてみることは大切ですね。

参考

https://developer.mozilla.org/ja/docs/Web/CSS/text-align
https://developer.mozilla.org/ja/docs/Web/CSS/vertical-alignhttps://developer.mozilla.org/ja/docs/Web/CSS/justify-content