Sto centrando un DIV all'interno di un altro DIV usando un flexbox. Pensa a una finestra di dialogo che viene visualizzata al centro dello schermo quando necessario.
Funziona bene, tuttavia sarebbe molto meglio se lo spazio sopra e sotto la finestra di dialogo non fosse esattamente uguale, avendo il 40% dello spazio rimanente sopra e il 60% sotto la finestra. Diventa complicato perché l'altezza della finestra di dialogo varia con la quantità di testo all'interno.
Ad esempio, se l'altezza del browser è di 1000 px e l'altezza della finestra di dialogo è di 400 px, voglio che lo spazio verticale rimanente (600 px) sia di 240 px sopra e 360 px sotto la finestra di dialogo. Potrei farlo con Javascript, ma sono curioso di sapere se esiste un modo intelligente con CSS. Ho provato ad aggiungere un margine inferiore al DIV #dialogBox, ma non funziona quando l'altezza della finestra di dialogo si avvicina all'altezza del 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>