4

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>

1
  • Tu problema es que cuando pones left y top coge la esquina y no coge el centro del elemento
    – Jose
    el 5 dic. 2018 a las 22:49

3 respuestas 3

1

Para centrar contenido dinámico usa transform: translate(-50%, -50%). Luego de haberlo centrado con top: 50% y left: 50% eso le dirá algo como muévete a la izquierda y arriba la mitad de lo que mida tu ancho y alto cualquiera que estos sean.

Como estás usando transform también para animar debes incluirlo en tu animación sin cambiarlo para que no cambie de posición.

$(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%;
  transform: translate(-50%, -50%);
  -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: translate(-50%, -50%) scale(0.5, 0.5);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) 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%">
</div>

<div>Contenido Cool</div>

Cambié el valor del scale para que sea más evidente que no cambia de posición. Tu puedes usar el que quieras.

1
  • No conocía esa función, gracias por tomarte tu tiempo y por darnos esa explicación sobre su funcionamiento
    – EMCode
    el 6 dic. 2018 a las 12:20
1

Listo, commente unas lineas de css, ya solo juega un poco con las medidas de la imagen y con el margin.

Salu2

$(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;*/
          width: 80px;
          height: 80px;
          margin: 20% 45%;
    			-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>

2
  • Gracias por tomarte el tiempo Noé, pero al escalar la imagen, se sale de su ubicación
    – EMCode
    el 6 dic. 2018 a las 12:18
  • es correcto, solo funciona cuando la imgen tiene un tamaño fijo. el 6 dic. 2018 a las 15:29
0

Prueba con esto:

.loader-container {
   background-color: rgba(0, 0, 0, 0.8);
   position: fixed;
   z-index: 9999999;
   width: 100%;
   height: 100%;

}

Y para el centrado de la imagen lo hago con margin:

.loader-container img {
    width: 80px;
    height: 80px;
    margin: 20% 48%;
}

Saludo espero te sirva de referencia.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.