ブックマーク / zenn.dev/tonkotsuboy_com (1)

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

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

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