0
197
Vistas¿Cómo centrar un div de carga antepuesto?
<script> (function($) { $(document).on('facetwp-refresh', function() { $('.facetwp-template').prepend('<div class="is-loading">Loading...</div>'); }); $(document).on('facetwp-loaded', function() { $('.facetwp-template .is-loading').remove(); }); })(jQuery); </script> <style> .is-loading{ position: relative; width: 100%; height:100%; align-content:center; align-items:center; justify-content:center; text-align:center; font-size:18px; font-weight:400; color: white; } </style> Tengo muchos problemas para tratar de centrar mi div .is- .is-loading dentro .facetwp-template Quiero que siempre esté en el centro del contenido .facetwp-template
si alguien puede simular tal situación .facetwp-template puede ser cualquier div e insertar un div de carga dentro y mostrarme lo que me perdí y no entendí.
tal vez incluso agregue un efecto de superposición para ver el texto de carga "blanco" y, si está lo suficientemente loco, ¿tal vez también inserte una animación de carga ligeramente exótica como un ícono giratorio?
lo que obtuve 
lo que quiero 
3 Respuestas
Responde la pregunta0
Haga que la posición sea absoluta y luego ajuste su posición div en la pantalla. Algo como:
<style> .is-loading{ position: absolute; top: 50%; left: 50%; width: 100%; height:100%; align-content:center; align-items:center; justify-content:center; text-align:center; font-size:18px; font-weight:400; color: white; } </style>0
Necesitas dar display: flex; o display: inline-flex; a su clase .is-loading . Solo entonces puede aplicar otros atributos relacionados con flex a su clase. Mira este violín: https://jsfiddle.net/enginustun/p32zbkwn/2/
Puedes intentar seguir el estilo;
.is-loading { display: flex; position: relative; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; color: white; }0
Haciéndolo absoluto y darle arriba, dejó 50% para colocarlo en el centro de la pantalla. Luego traduzca en -50%.
.is-loading{ position: absoulte; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height:100%; text-align:center; font-size:18px; font-weight:400; color: white; }