Estoy centrando un div dentro de otro div usando un flexbox. Piense en una ventana de diálogo que aparece en el centro de la pantalla cuando sea necesario.
Funciona bien, sin embargo, se vería mucho mejor si el espacio arriba y abajo del cuadro de diálogo no fuera exactamente igual, con un 40 % del espacio restante encima y un 60 % debajo del cuadro de diálogo. Se complica porque la altura del cuadro de diálogo varía según la cantidad de texto que contiene.
Entonces, por ejemplo, si la altura del navegador es de 1000 px y la altura de la ventana de diálogo es de 400 px, quiero que el espacio vertical restante (600 px) sea 240 px arriba y 360 px debajo del diálogo.
Podría hacerlo con JavaScript, pero tengo curiosidad por saber si hay alguna forma inteligente con CSS. Intenté agregar un margen inferior al div #dialogBox , pero eso no funciona cuando la altura del diálogo se acerca a la altura del navegador.
#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>Esta solución usa display: grid , es una característica nueva, así que asegúrese de verificar el soporte del navegador y haga clic aquí para obtener más información.
Esta es la línea que controla los espacios superior e inferior:
grid-template-rows: 40fr [content-start] auto [content-end] 60fr;
El contenido del texto del fragmento se puede editar para que verifique que el cuadro se mantenga centrado incluso si cambia la altura.
#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>Use la dirección del pseudoelemento y la columna para simular el espacio en blanco. Simplemente ajuste el flex-grow del pseudo elemento para controlar cuánto espacio libre debe ocupar cada uno. El mismo crecimiento flexible dará el mismo espacio:
#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> También puedes usar 2 y 3 . Simplemente necesitamos mantener la misma proporción:
#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> Otra idea es usar el valor superior igual al 40% y rectificar la posición con traducir (misma lógica con el 50% al centrar)
#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>Puede agregar espaciadores divs y configurar el crecimiento flexible con una proporción de 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>De manera simple usando la posición y el margen, supuse que la altura de su diálogo es siempre el 40% de la altura del navegador.
.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>