Center a div unequally using CSS

Question

I am centering a div inside another div using a flexbox. Think of a dialog window that pops up in the center of the screen when needed.

It works fine, however it would look much better if the space above and below the dialog was not exactly equal, having 40% of the remaining space be above and 60% below the dialog. It gets tricky because the dialog height varies with the amount of text inside.

So for example, if the browser height is 1000px, and the dialog window height is 400px, I want the remaining vertical space (600px) to be 240px above and 360px below the dialog.

I could do it with JavaScript, but I'm curious if there is some clever way with CSS. I tried adding a bottom margin to the #dialogBox div, but that doesn't work when the dialog height is getting near the browser height.

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

Answer 1

Use pseudo element and column direction to simulate the white space. Simply adjust the flex-grow of the pseudo element to control how much free space each one should take. Equal flex-grow will give equal space:

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

You can also use 2 and 3. We simply need to keep the same ratio:

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

Another idea is to use top value equal to 40% and rectify the position with translate (same logic with the 50% when centring)

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