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