Saya ingin membuat modal sederhana di bagian atas aplikasi saya dan saya mencoba memindahkan modal ini dari tepi seperti 20-30px dan saya mencoba menggunakan margin di sana, tetapi margin-top hanya berfungsi dan bagian bawah diabaikan. Saya memiliki dua kasus penggunaan: Pertama dengan menggunakan kisi, saya ingin modal dipusatkan ketika konten tidak meluap dan kedua ketika konten meluap, saya ingin memiliki margin dari tepi atas dan bawah. Lihat ini:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
.background {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: rgba(0,0,0,.3);
}
.modal {
  width: 500px;
  padding: 3rem;
  margin: 2rem 0;
  background-color: white;
}
<h1>Some content behind</h1>
<div class="background">
   <div class="modal">
     <h1>Some modal</h1>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     
   </div>
</div>
2
Freestyle09 8 Januari 2021, 11:23

3 jawaban

Jawaban Terbaik

Saya menemukan jawaban, ketika orang tua dalam posisi tetap, kami sebenarnya tidak dapat mengatur margin dari bawah. Solusi paling sederhana adalah membungkus elemen-elemen itu dengan div lain dengan posisi statis sebagai default. Tidak ada aturan css tambahan yang diperlukan. Perhatikan bahwa ketika konten lebih kecil dari ketinggian viewport, modal sepenuhnya terpusat seperti yang saya harapkan. Terimakasih atas bantuannya!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
.background {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: rgba(0,0,0,.3);
}
.modal {
  width: 500px;
  padding: 3rem;
  margin: 2rem 0;
  background-color: white;
}
<h1>Some content behind</h1>
<div class="background">
  <div class="modal__wrapper">
   <div class="modal">
     <h1>Some modal</h1>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     </div>
   </div>
</div>
1
Freestyle09 8 Januari 2021, 09:10

Anda perlu menambahkan satu wadah tambahan untuk mencapai ini.

Dan, gunakan margin: 2rem auto; daripada menggunakan display: grid;.

.modal-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: rgba(0,0,0,.3);
}

.modal-inner {
  width: 500px;
  margin: 2rem auto;
}

.modal {
  padding: 3rem;
  background-color: white;
}
<div class="modal-bg">
  <div class="modal-inner">
    <div class="modal">
      <h1>Some modal</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam
        deleniti alias perferendis, nobis quia tempora dolore quis excepturi
        sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis
        sapiente.
      </p>
    </div>
  </div>
</div>
1
Catalin 8 Januari 2021, 08:37

Hapus height dan atur margin di elemen .background Anda, ini akan berfungsi:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
html, body {
  background-color: lightgray;
}
.background {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 2rem 0;
}
.modal {
  width: 500px;
  padding: 3rem;
  background-color: white;
  margin: 2rem 0;
}
<h1>Some content behind</h1>
<div class="background">
   <div class="modal">
     <h1>Some modal</h1>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias 
       perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsam deleniti alias perferendis, nobis quia tempora dolore quis excepturi sunt ullam placeat perspiciatis nihil sed iure est possimus, corporis sapiente.</p>
     
   </div>
</div>
0
LS_ 8 Januari 2021, 08:50