最短2行。上下左右中央揃えにはCSS Gridが一番ラク

CSSで要素を上下左右中央揃え（以下、中央揃え）する機会は多いです。要素は1つだけの場合もありますし、複数の要素の場合もあります。 ▼ 中央揃えの4つの事例 昔は多くのコードを書いていましたが、CSS Gridを使えば最短2行のコードだけで実現できます。2020年から全ブラウザ（Chrome・Firefox・Safari・Edge）で対応済みです。 本記事では、単一・複数要素の中央揃えの方法、キーとなるplace-contentとplace-itemsの使い方、従来のコードとの比較についてデモを交えて解説します。 結論 1つの要素の中央揃えは、次の2行のコードを使います。

[yarumato]

“以前はFlexboxの3行の中央揃えだったが、2020年以降は本記事の手法を使ってる。上下左右中央揃えをしないコンテンツはほぼないので、頻繁に使うCSS表現”　　CSS Gridは解除がうまくできなかった

[cpw]

ChatGPTに聞いてみたらそのまんま返ってきました

[kagehiens]

CSS Gridは本当にみんなが欲しかったものだと思う

[matsuedon]

上上下下右左右左AB

[kkeisuke]

place-items