CSS kullanarak DIV'yi eşit olmayan şekilde ortalayın

Flexbox kullanarak bir DIV'yi başka bir DIV içinde ortalıyorum. Gerektiğinde ekranın ortasında açılan bir iletişim penceresi düşünün.

İyi çalışıyor, ancak iletişim kutusunun üstündeki ve altındaki alan tam olarak eşit değilse, kalan alanın% 40'ının iletişim kutusunun üstünde ve% 60'ın altında olması daha iyi görünecektir. İletişim yüksekliği, içindeki metin miktarına göre değiştiği için zorlaşır.

Örneğin, tarayıcı yüksekliği 1000 piksel ve iletişim penceresi yüksekliği 400 piksel ise, kalan dikey alanın (600 piksel) iletişim kutusunun 240 piksel ve 360 ​​piksel altında olmasını istiyorum. Javascript ile yapabilirdim, ama CSS ile akıllı bir yol olup olmadığını merak ediyorum. #DialogBox DIV için bir alt kenar boşluğu eklemeyi denedim, ancak iletişim yüksekliği tarayıcı yüksekliğine yaklaştığında çalışmıyor.

#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>

Beyaz boşluğu simüle etmek için sözde öğe ve sütun yönünü kullanın. flex-growHer birinin ne kadar boş alan gerektiğini kontrol etmek için sözde öğeyi ayarlayın . Eşit flex-grow eşit alan sağlar:

#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>

Ayrıca 2ve öğelerini de kullanabilirsiniz 3. Sadece aynı oranı korumamız gerekiyor:

#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>

Başka bir fikir, 40%çeviriye eşit en üst değeri kullanmak ve konumu düzeltmektir ( 50%merkezleme ile aynı mantık )

#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>

Bu çözüm kullanır display: grid, yeni bir özelliktir, bu nedenle tarayıcı desteğini kontrol ettiğinizden ve daha fazla bilgi edinmek için buraya tıklayın .

Üst ve alt boşlukları kontrol eden çizgi budur:

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

Snippet metin içeriği, yükseklik değişse bile kutunun ortalanmış olup olmadığını kontrol etmeniz için düzenlenebilir.

#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>

Aralayıcılar div ekleyebilir ve esnek büyümeyi 4: 6 oranıyla ayarlayabilirsiniz.

#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>

Konum ve kenar boşluğunu kullanarak basit bir şekilde, iletişim yüksekliğinizin her zaman tarayıcı yüksekliğinin% 40'ı olduğunu varsaydım.

.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>