上下左右中央寄せ(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. 参考

• 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) を、グリッドやフレックスボックスなどのレイアウトシステムにおいて、一度に指定することができます。
• 2022年のモダンCSS改 - Speaker Deck