CSSを使用して不均等にDIVを中央に配置する

フレックスボックスを使用して、DIVを別のDIVの中央に配置しています。必要に応じて画面の中央にポップアップするダイアログウィンドウを考えてみてください。

正常に機能しますが、ダイアログの上下のスペースが完全に等しくなく、ダイアログの上下に残りのスペースの40％と60％があると、見栄えがよくなります。内部のテキストの量によってダイアログの高さが変わるため、注意が必要です。

たとえば、ブラウザの高さが1000ピクセルで、ダイアログウィンドウの高さが400ピクセルの場合、残りの垂直方向のスペース（600ピクセル）をダイアログの上240ピクセル、下360ピクセルにしたいとします。私はJavaScriptでそれを行うことができますが、CSSでいくつかの巧妙な方法があるかどうか知りたいです。#dialogBox DIVに下マージンを追加しようとしましたが、ダイアログの高さがブラウザーの高さに近づくと機能しません。

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

擬似要素と列の方向を使用して、空白をシミュレートします。flex-grow疑似要素のを調整するだけで、それぞれが必要とする空き容量を制御できます。等しいflex-growは等しいスペースを与えます：

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

2およびも使用できます3。同じ比率を維持する必要があるだけです。

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

別のアイデアは、トップ値に等しい値を使用し40%、位置を移動で修正することです（心合わせ50%時と同じロジック）。

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

このソリューションの用途はdisplay: grid、それは新機能ですので、必ず確認してブラウザのサポートをしてこちらをクリックより学ぶこと。

これは、上部と下部のスペースを制御する行です。

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

スニペットのテキストコンテンツを編集して、高さが変わってもボックスが中央に配置されていることを確認できます。

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

スペーサーdivを追加して、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>

位置とマージンを使用した簡単な方法、ダイアログの高さは常にブラウザーの高さの40％であると想定しました。

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