中心内容和图片预加载器

Question

我试图让我的预装旋转器居中在页面中间并使图像居中在旋转器内部，旋转器似乎在右侧约50px。不知道为什么它似乎有偏移。我也希望徽标不要在里面旋转

$(window).on('load', function() { // makes sure the whole site is loaded 
  $('.loaderInner').fadeOut(); // will first fade out the loading animation 
  $('#load_cover').delay(400).fadeOut('slow');  
  $('body').delay(400).css({'overflow':'visible'});
})

#load_cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  background-color: #000;
  z-index: 1000000;
}

.loaderInner {
  position: absolute;
  top: 50%;
  left: 50%;
}

.loader-logo{
	background-image: url('http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-down-icon.png');
}

.loader {
  border: 4px solid #838383;
  border-radius: 50%;
  border-top: 4px solid #dddddd;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
  box-shadow: 0 0 1px #999;
  filter: blur(0.9px);
  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div id="load_cover">
  <div class="loaderInner">
    <div class="loader loader-logo"></div>
  </div>
</div>

Answer 1

这是因为您的装载机徽标的高度和宽度也是100px  导致装载机标志从中心移位。

$(window).on('load', function() { // makes sure the whole site is loaded 
  $('.loaderInner').fadeOut(); // will first fade out the loading animation 
  $('#load_cover').delay(400).fadeOut('slow');  
  $('body').delay(400).css({'overflow':'visible'});
})

#load_cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  background-color: #000;
  z-index: 1000000;
}

.loaderInner {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

.loader-logo{
width: 100px;
transform: rotate(-90deg);
top: calc(50% - 38px);
position: absolute;
left: calc(50% - 70px);
height: 100px;
	background-image: url('http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-down-icon.png');
}

.loader {
  border: 4px solid #838383;
  border-radius: 50%;
  border-top: 4px solid #dddddd;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
  box-shadow: 0 0 1px #999;
  filter: blur(0.9px);
  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div id="load_cover">
  <div class="loaderInner">
    <div class="loader"></div>
    <div class="loader-logo"></div>
  </div>
</div>

Answer 2

使用transform属性来修复偏移量 并使用徽标作为背景并居中，在编辑后查看下面的代码。

＆＃13;

＆＃13;

$(window).on('load', function() { // makes sure the whole site is loaded 
  $('.loaderInner').fadeOut(); // will first fade out the loading animation 
  $('#load_cover').delay(400).fadeOut('slow');  
  $('body').delay(400).css({'overflow':'visible'});
})

＆＃13;

#load_cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  background-color: #000;
  z-index: 1000000;
}

.loaderInner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translateX(-50%) translateY(-50%);
}

.loader {
  border: 4px solid #838383;
  border-radius: 50%;
  border-top: 4px solid #dddddd;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
  box-shadow: 0 0 1px #999;
  filter: blur(0.9px);
  background:url('http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-down-icon.png') no-repeat center;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

＆＃13;

<div id="load_cover">
  <div class="loaderInner">
    <div class="loader loader-logo"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;