如何使装载机居中？

时间：2018-12-16 05:00:16

标签： css

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

这是我的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>

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

5 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

通过div说.flex-center包装装载机，以免改变装载机.lds-css。像这样：-

<div class="flex-center">
<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>
</div>

将CSS添加到此.flex-center中，例如：-

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

答案 2 :(得分：0)

只需将以下类添加到您的CSS 

.lds-css {
  display: flex; 
  flex-direction: row;
  justify-content: center; 
  text-align: center
}

或者您可以try this 

.lds-css {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

我希望你是这个意思吗？ https://jsfiddle.net/yxzL5w7o/

答案 3 :(得分：0)

信用至：https://stackoverflow.com/a/33049392/2182349 

html,
body {
  height: 100%;
}

.lds-css {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lds-blocks {
  max-width: 137px;
}

@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">
    <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>

答案 4 :(得分：0)

只需在您的代码中添加此CSS即可享受：使用flex的解决方案也不错，但是并非所有浏览器都支持。 

.lds-css {position:fixed; left:50%; margin-left: -100px; top:50%; margin-top: -100px;}

这是工作example。

相关问题
最新问题