1. このページの目的
上下左右中央寄せ(CSS)の実験。
2. デモその1
demo1
CSS
.demo1 {
display: flex;
justify-content: center;
align-items: center;
}
3. デモその2
demo2
CSS
.demo2 {
display: grid;
place-content: center;
}
4. 参考
- flex - CSS: カスケーディングスタイルシート | MDN
- justify-content - CSS: カスケーディングスタイルシート | MDN
- これは flex のために使うプロパティである。
- justify-content - CSS: カスケーディングスタイルシート | MDN
- grid - CSS: カスケーディングスタイルシート | MDN
- align-items - CSS: カスケーディングスタイルシート | MDN
- CSS の
align-items
プロパティは、すべての直接の子要素に集合としてalign-self
の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。
- CSS の
- place-content - CSS: カスケーディングスタイルシート | MDN
place-content
は CSS の一括指定プロパティで、ブロック方向とインライン方向の内容物の配置 (すなわちalign-content
およびjustify-content
) を、グリッドやフレックスボックスなどのレイアウトシステムにおいて、一度に指定することができます。
- 2022年のモダンCSS改 - Speaker Deck