position: absolute; と margin: 0 auto; による中央揃えの違いはなんですか?

双方の違いについて説明します。
2022年9月28日
ユーザー

お世話になっております。

modal を中央揃えする為の1つの手段として、
今回 positon:absolute を使用したと認識しております。

要素の中央揃えには他にも様々な手法があると思い、
他レッスンでよく使用されている margin: 0 auto; を指定してみました。

すると、確かに中央揃えにはなるのですが、
同時に指定した background-color が無効化されてしまいました。

なぜこのような挙動が起こるのでしょうか?

margin:0 auto;position:absolute; による中央揃えにおいて、
それぞれ異なる前提条件があるのであれば、具体的にご教示頂けますと幸いです。

コード

#mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.4);
}

#modal {
  background-color: #fff;
  width: 300px;
  border-radius: 4px;
  padding: 20px;
  margin:0 auto;
}

margin:0 auto;を指定した際の挙動

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(9)