Center a DIV unequally using CSS

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 1000 px, and the dialog window height is 400 px, I want the remaining vertical space (600 px) to be 240 px above and 360 px 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.

Thanks for any tips.

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

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