CSS absolute: ブロック要素を上下左右中央に配置

position: absolute; でブロック要素を親要素に対して上下左右中央に
配置するサンプル。
div1
position: relative;
position: absolute;
inset: 0;
margin: auto;
(2023/07-2024/04)
動作 : Edge120

◎ノート
・MDN: CSS positionMDN: CSS inset

◎ CSS aboslute で上下中央に配置する場合 (flex との比較)

1) 上下中央に配置するブロック要素に height の指定が必要です。
  内部のコンテンツにあわせて高さが自動調整されません。
  flex の場合は高さが自動調整されるので height の指定が不要です。

2) 子の要素を複数配置できます。
  上下中央に配置する div 以外の要素も置くことができます。

  flex の場合は上下中央に配置する div しか置けません。
  複数の要素を配置できません。

inserted by FC2 system