Je centre un DIV à l'intérieur d'un autre DIV à l'aide d'un flexbox. Pensez à une fenêtre de dialogue qui apparaît au centre de l'écran en cas de besoin.
Cela fonctionne bien, mais il serait beaucoup mieux si l'espace au-dessus et en dessous de la boîte de dialogue n'était pas exactement égal, avec 40% de l'espace restant au-dessus et 60% en dessous de la boîte de dialogue. Cela devient difficile car la hauteur de la boîte de dialogue varie avec la quantité de texte à l'intérieur.
Ainsi, par exemple, si la hauteur du navigateur est de 1000 px et la hauteur de la fenêtre de dialogue est de 400 px, je veux que l'espace vertical restant (600 px) soit 240 px au-dessus et 360 px en dessous de la boîte de dialogue. Je pourrais le faire avec Javascript, mais je suis curieux de savoir s'il existe un moyen intelligent avec CSS. J'ai essayé d'ajouter une marge inférieure à la DIV #dialogBox, mais cela ne fonctionne pas lorsque la hauteur de la boîte de dialogue approche de la hauteur du navigateur.
#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>