css - 装载机如何居中？

Question

我最近创建了一个加载器，但我不知道如何将它居中并将其放在屏幕中间。当页面加载时，它现在位于屏幕的左上角。

这是我的 html 和 css 的工作片段。

@keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}
@-webkit-keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}
.lds-blocks {
  position: relative;
}
.lds-blocks div {
  position: absolute;
  width: 70px;
  height: 70px;
  background: #242D3C;
  -webkit-animation: lds-blocks 1s linear infinite;
  animation: lds-blocks 1s linear infinite;
}
.lds-blocks {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

<div class="lds-css ng-scope">
   <div class="lds-blocks" style="100%;height:100%">
      <div style="left:-7px;top:-7px;animation-delay:0s"></div>
      <div style="left:65px;top:-7px;animation-delay:0.125s"></div>
      <div style="left:137px;top:-7px;animation-delay:0.25s"></div>
      <div style="left:-7px;top:65px;animation-delay:0.875s"></div>
      <div style="left:137px;top:65px;animation-delay:0.375s"></div>
      <div style="left:-7px;top:137px;animation-delay:0.75s"></div>
      <div style="left:65px;top:137px;animation-delay:0.625s"></div>
      <div style="left:137px;top:137px;animation-delay:0.5s"></div>
   </div>
</div>

我怎样才能让装载机居中？

Answer 1

请在此处检查我的预加载器之一:https://codepen.io/animatedcreativity/pen/prXWaG

请检查我使用绝对位置、左和上 (50%) 和变换 (-50%) 的技术。

@keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}
@-webkit-keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}
.lds-blocks {
  position: relative;
}
.lds-blocks div {
  position: absolute;
  width: 70px;
  height: 70px;
  background: #242D3C;
  -webkit-animation: lds-blocks 1s linear infinite;
  animation: lds-blocks 1s linear infinite;
}
.lds-blocks {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<div class="lds-css ng-scope">
   <div class="lds-blocks" style="100%;height:100%">
      <div style="left:-7px;top:-7px;animation-delay:0s"></div>
      <div style="left:65px;top:-7px;animation-delay:0.125s"></div>
      <div style="left:137px;top:-7px;animation-delay:0.25s"></div>
      <div style="left:-7px;top:65px;animation-delay:0.875s"></div>
      <div style="left:137px;top:65px;animation-delay:0.375s"></div>
      <div style="left:-7px;top:137px;animation-delay:0.75s"></div>
      <div style="left:65px;top:137px;animation-delay:0.625s"></div>
      <div style="left:137px;top:137px;animation-delay:0.5s"></div>
   </div>
</div>