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

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;を指定した際の挙動