上下左右中央寄せ(CSS)

1. このページの目的

上下左右中央寄せ(CSS)の実験。

2. デモその1

CSS

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

3. デモその2

CSS

.demo2 {
  display: grid;
  place-content: center;
}

4. デモその3

CSS

.demo2 {
  display: grid;
  place-content: center;
  place-items: center;
}

• この書き方なら、grid を flex に書き換えても同じ効果になる。

5. 参考

• flex - CSS: カスケーディングスタイルシート | MDN
  • justify-content - CSS: カスケーディングスタイルシート | MDN
    • これは flex のために使うプロパティである。
• grid - CSS: カスケーディングスタイルシート | MDN
• align-items - CSS: カスケーディングスタイルシート | MDN
  • CSS の align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。
• place-content - CSS: カスケーディングスタイルシート | MDN
  • place-content は CSS の一括指定プロパティで、ブロック方向とインライン方向の内容物の配置 (すなわち align-content および justify-content) を、グリッドやフレックスボックスなどのレイアウトシステムにおいて、一度に指定することができます。
• place-items - CSS: カスケーディングスタイルシート | MDN
  • CSS の place-items は一括指定プロパティで、アイテムのブロック軸およびインライン軸に沿ったアイテムの配置 (すなわち align-items および justify-items プロパティ) を、グリッドやフレックスボックスなどのレイアウトシステムにおいて、一度に指定することができます。2 番目の値が設定されていない場合、最初の値がそちらにも使用されます。
• 2022年のモダンCSS改 - Speaker Deck