Pusatkan DIV yang tidak seimbang menggunakan CSS

Saya memusatkan DIV di dalam DIV lain menggunakan flexbox. Pikirkan jendela dialog yang muncul di tengah layar bila diperlukan.

Ini berfungsi dengan baik, namun akan terlihat jauh lebih baik jika ruang di atas dan di bawah dialog tidak persis sama, memiliki 40% dari ruang yang tersisa berada di atas dan 60% di bawah dialog. Itu menjadi rumit karena ketinggian dialog bervariasi dengan jumlah teks di dalamnya.

Jadi misalnya, jika tinggi browser 1000 px, dan tinggi jendela dialog adalah 400 px, saya ingin ruang vertikal yang tersisa (600 px) menjadi 240 px di atas dan 360 px di bawah dialog. Saya bisa melakukannya dengan Javascript, tapi saya ingin tahu apakah ada cara pintar dengan CSS. Saya mencoba menambahkan margin bawah ke #dialogBox DIV, tetapi itu tidak berfungsi ketika tinggi dialog semakin mendekati tinggi browser.

#dialogBoxPanel
  {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
}
#dialogBox
  {
  width:350px;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Text</div>
</div>

Gunakan elemen pseudo dan arah kolom untuk mensimulasikan ruang putih. Cukup sesuaikan flex-growelemen pseudo untuk mengontrol berapa banyak ruang kosong yang harus diambil masing-masing. Flex-grow yang setara akan memberikan ruang yang sama:

#dialogBoxPanel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* the center */
  background:linear-gradient(red,red) center/100% 1px no-repeat;
}

#dialogBox {
  width: 350px;
  border:1px solid;
}

#dialogBoxPanel:before {
  content:"";
  flex-grow:4;
}
#dialogBoxPanel:after {
  content:"";
  flex-grow:6;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit diam eu nisl fringilla ornare. Pellentesque aliquam quam et tellus egestas sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin bibendum,</div>
</div>

Anda juga dapat menggunakan 2dan 3. Kami hanya perlu menjaga rasio yang sama:

#dialogBoxPanel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* the center */
  background:linear-gradient(red,red) center/100% 1px no-repeat;
}

#dialogBox {
  width: 350px;
  border:1px solid;
}

#dialogBoxPanel:before {
  content:"";
  flex-grow:2;
}
#dialogBoxPanel:after {
  content:"";
  flex-grow:3;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit diam eu nisl fringilla ornare. Pellentesque aliquam quam et tellus egestas sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin bibendum,</div>
</div>

Gagasan lain adalah menggunakan nilai teratas sama dengan 40%dan memperbaiki posisi dengan menerjemahkan (logika yang sama dengan 50%saat pemusatan)

#dialogBoxPanel {
  position: absolute;;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* the center */
  background:linear-gradient(red,red) center/100% 1px no-repeat;
}

#dialogBox {
  position:relative;
  top:40%;
  width: 350px;
  transform:translateY(-40%);
  margin:auto;
  border:1px solid;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit diam eu nisl fringilla ornare. Pellentesque aliquam quam et tellus egestas sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin bibendum,</div>
</div>

Solusi ini menggunakan display: grid, ini fitur baru jadi pastikan untuk memeriksa dukungan browser dan klik di sini untuk mempelajari lebih lanjut.

Ini adalah garis yang mengontrol ruang atas dan bawah:

grid-template-rows: 40fr [content-start] auto [content-end] 60fr;

Konten teks potongan dapat diedit untuk Anda untuk memeriksa bahwa kotak tetap berada di tengah bahkan jika ketinggiannya berubah.

#dialogBoxPanel {
    display: grid;
    place-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    grid-template-rows: 40fr [content-start] auto [content-end] 60fr;
}
#dialogBox {
    border: 1px solid;
    width: 350px;
    grid-area: content;
}

<div id="dialogBoxPanel">
   <div id="dialogBox" contenteditable>Text</div>
</div>

Anda dapat menambahkan div spacer dan mengatur flex-grow dengan rasio 4: 6.

#dialogBoxPanel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;

  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

#dialogBox {
  width: 350px;
  border: 1px solid black;
}

.spacer-top{
  flex-grow: 4;
}
.spacer-bottom{
  flex-grow: 6;

<div id="dialogBoxPanel">
  <div class="spacer-top"></div>
  <div id="dialogBox">Text</div>
  <div class="spacer-bottom"></div>
</div>

Cara sederhana menggunakan posisi dan margin, saya berasumsi bahwa tinggi dialog Anda selalu 40% dari tinggi browser.

.modal{
            max-height:50%;
            width:400px;
            margin: 10% auto 5% auto;
            position:absolute;
            top:0;
            bottom:0;
            right:0;
            left:0;
            overflow-y: auto
        }
        .modal-body{
            background-color: beige;
            padding: 20px;
            line-height: 21px
        }

HTML

<div class="modal">
 <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea </div>
</div>