Home / Questions / 219913
Accepted
EMCode
Asked: 2020-12-06 14:12:09 +0800 CST 2020-12-06 14:12:09 +0800 CST

Left and Top 50% does not center image on screen with absolute position

  • 772

I need to center both vertically and horizontally my site's preload image. The image is inside a container position: absoluteand I applied the following properties to center it:left:50%; top:50%; margin:-50px 0 0 -50px;

But it does not work.

I should clarify that if I work with a smaller image (100px) it is centered, but I want to keep the image at a larger size, currently it is 1000px (I apply a width: 50%to better preserve the resolution)

I don't want to just adjust it with pixels, as this would be messy with various screen resolutions.

Is there something I'm doing wrong?

thanks for your help

	$(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>

css

3 Answers

  1. Done, comment a few lines of css, and just play a little with the measurements of the image and the margin.

    hello2

    $(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>

    • 1
  2. Best Answer

    To center dynamic content use transform: translate(-50%, -50%). After you have centered it with top: 50%and left: 50%that will tell you something like move left and up half as long as your width and height whatever those are.

    Since you are also using transformit to animate, you must include it in your animation without changing it so that it does not change its position.

    $(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>

    I changed the value of the scaleto make it more obvious that it doesn't change position. You can use the one you want.

    • 1

  3. Try with this:

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

    }

    And for the centering of the image I do it with margin:

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

    Greetings, I hope it serves as a reference.

    • 0