Question

我在项目中使用纯CSS加载器作为加载内容。在第一次加载新页面或打开时调用。

加载程序的HTML代码

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</body>
</html>

装载程序的CSS代码

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
  }
  .lds-ripple div {
    position: absolute;
    border: 4px solid rgb(0, 225, 255);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
    0% {
      top: 28px;
      left: 28px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: -1px;
      left: -1px;
      width: 58px;
      height: 58px;
      opacity: 0;
    }
  }

我想将它放在身体的水平和垂直中心，但不想将任何CSS应用到身体，因为它会影响我项目的其他元素。现在我已经了解了堆栈溢出中的一些示例，如

How to center an element horizontally and vertically?

并且

Center a DIV horizontally and vertically

还有2-3个例子，但它们对我没用。也许是因为CSS类.lds-ripple的位置类型给出了问题。有没有办法将这个装载器水平或垂直放置在身体的中心，而不对身体施加任何css。

Answer 1

您只需更改css

的lds-ripple即可

.lds-ripple {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
  .lds-ripple div {
    position: absolute;
    border: 4px solid rgb(0, 225, 255);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
    0% {
      top: 28px;
      left: 28px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: -1px;
      left: -1px;
      width: 58px;
      height: 58px;
      opacity: 0;
    }
  }

<div class="lds-ripple">
        <div></div>
        <div></div>
    </div>

Answer 2

已添加

.lds-ripple {
   display: inline-block;
   position: relative;
   width: 64px;
   height: 64px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

 
body, html {
   height: 100%;
   margin: 0;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
  }
  .lds-ripple div {
position: absolute;
border: 4px solid rgb(0, 225, 255);
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
0% {
  top: 28px;
  left: 28px;
  width: 0;
  height: 0;
  opacity: 1;
}
100% {
  top: -1px;
  left: -1px;
  width: 58px;
  height: 58px;
  opacity: 0;
}
  }

 <div class="lds-ripple">
    <div></div>
    <div></div>
</div>

将包含其他div的div放在一个中心，这些div相互依赖

2 个答案: