代码之家 › 专栏 › 技术社区 › Yash Jain

将包含相互依赖的其他div的div居中

css html

Yash Jain · 技术社区 · 7 年前

我在我的项目中使用一个纯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。

2 回复 | 直到 7 年前

Zuber 7 年前

你可以简单地改变 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>

Nandita Sharma 7 年前

补充

.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>