Question

这是我的加载html网站，但问题是我想保持加载图标和文本居中，无论窗口的大小。我已经尝试了所有我知道的东西，但它仍然没有保持中心。

如果你们想看一个这个页面的例子： Example

请和谢谢

<html>

<body>

<style>
body{
background-color: #1B2B36;
}
.sk-folding-cube {
width: 40px;
margin: 0 auto;
height: 40px;
 position:relative;
 top:300px;

-webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
 }

.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
margin: 0 auto;

position: relative;
-webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
      transform: scale(1.1);
}
 .sk-folding-cube .sk-cube:before {
 content: '';
 position: absolute;
 top: 0;
 margin: 0 auto;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: white;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
      animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
}
   .sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
      transform: scale(1.1) rotateZ(90deg);
  }
  .sk-folding-cube .sk-cube3 {
    -webkit-transform: scale(1.1) rotateZ(180deg);
      transform: scale(1.1) rotateZ(180deg);
  }
  .sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
      transform: scale(1.1) rotateZ(270deg);
   }
    .sk-folding-cube .sk-cube2:before {
    -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
   }
   .sk-folding-cube .sk-cube3:before {
    -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
   }
  .sk-folding-cube .sk-cube4:before {
   -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s;
   }
   @-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
   opacity: 0;
   } 25%, 75% {
     -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
     opacity: 1;
    } 90%, 100% {
     -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
       opacity: 0;
       }
       }

     @keyframes sk-foldCubeAngle {
      0%, 10% {
      -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
     opacity: 0;
     } 25%, 75% {
     -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
    opacity: 1;
   } 90%, 100% {
     -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
   opacity: 0;
  }

  }

   #coming{
   position: absolute;
   left: 610px;
   color: white;
   }             
  </style>
   <div class="sk-folding-cube">
   <div class="sk-cube1 sk-cube"></div>
   <div class="sk-cube2 sk-cube"></div>
   <div class="sk-cube4 sk-cube"></div>
  <div class="sk-cube3 sk-cube"></div>
  </div>
   <h1 id="coming">Coming Soon!</h1>

  </body>
  <script>
       setTimeout(function(){
       self.location = "main.html";
       }, 30000000000000000);
   </script>
   </html>

Answer 1

首先，考虑下次制作一个片段，然后将CSS和HTML分开。

其次，

#coming{
   text-align: center;
   color: white;
   }

是您正在寻找的。

有关问题的指导，请参阅this。

保持文本和加载图标居中

1 个答案: