Necesito centrar tanto en vertical como en horizontal la imagen de precarga de mi sitio. La imagen está dentro de un contenedor en position: absolute
y apliqué las siguientes propiedades para centrarlo: left:50%;
top:50%;
margin:-50px
0 0 -50px;
Pero no funciona.
Debo aclarar que si trabajo con una imagen más pequeña (100px) sí se centra, pero deseo mantener la imagen en un tamaño superior, actualmente es de 1000px (aplico un width: 50%
para conservar mejor la resolución)
No quiero ajustarlo simplemente con pixeles, pues esto sería un lío con varias resoluciones de pantalla.
Hay algo que esté haciendo mal?
Gracias por su ayuda
$(function(){
$("#loader-image").fadeIn(3000, function(){
$("#loader-image").fadeOut(1000, function(){
$(".loader-container").fadeOut(2000, function(){
});
});
});
});
.loader-container {
position: fixed;
top:0; left:0;
right:0; bottom:0;
background: #c5161d;
background: -moz-radial-gradient(center, ellipse cover, #c5161d 0%, #961214 50%, #6d0d0e 100%);
background: -webkit-radial-gradient(center, ellipse cover, #c5161d 0%,#961214 50%,#6d0d0e 100%);
background: radial-gradient(ellipse at center, #c5161d 0%,#961214 50%,#6d0d0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5161d', endColorstr='#6d0d0e',GradientType=1 );
z-index: 999;
overflow: hidden;
}
#loader-image {
display: none;
position: absolute;
left:50%; top:50%;
margin:-50px 0 0 -50px;
-webkit-animation: pulse 4s ease-in-out; /* Safari 4+ */
-moz-animation: pulse 4s ease-in-out; /* Fx 5+ */
-o-animation: pulse 4s ease-in-out; /* Opera 12+ */
animation: pulse 4s ease-in-out; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes pulse {
0% {-webkit-transform: scale(0.99, 0.99);}
100% {-webkit-transform: scale(1, 1);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader-container"><img src="https://i.imgur.com/ji756Ho.png" alt="Image" id="loader-image" width="50%"></img></div>
<div>Contenido Cool</div>