Question

以下是我的HTML结构。请不要更改HTML结构。请任何人帮我解决？

甚至尝试第一个外部div＆＃34;位置相对＆＃34;和innerDiv＆＃34;定位绝对保证金自动＆＃34;除了它仍然在浏览器的顶部之外的所有

            <div id="floatingCirclesG">
                <div class="f_circleG" id="frotateG_01"></div>
                <div class="f_circleG" id="frotateG_02"></div>
                <div class="f_circleG" id="frotateG_03"></div>
                <div class="f_circleG" id="frotateG_04"></div>
                <div class="f_circleG" id="frotateG_05"></div>
                <div class="f_circleG" id="frotateG_06"></div>
                <div class="f_circleG" id="frotateG_07"></div>
                <div class="f_circleG" id="frotateG_08"></div>
            </div>

        </div>
    </div>
</body>

以下是我的css文件

      .outerDiv{
              position:relative;
             }

           .innerDiv{
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
          }

          #floatingCirclesG{
                position:relative;
                width:125px;
                height:125px;
                margin:auto;
                transform:scale(0.6);
                -o-transform:scale(0.6);
                -ms-transform:scale(0.6);
                -webkit-transform:scale(0.6);
                -moz-transform:scale(0.6);
           }

   .f_circleG{
       position:absolute;
background-color:rgb(255,255,255);
height:22px;
width:22px;
border-radius:12px;
    -o-border-radius:12px;
    -ms-border-radius:12px;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
animation-name:f_fadeG;
    -o-animation-name:f_fadeG;
    -ms-animation-name:f_fadeG;
    -webkit-animation-name:f_fadeG;
    -moz-animation-name:f_fadeG;
animation-duration:1.2s;
    -o-animation-duration:1.2s;
    -ms-animation-duration:1.2s;
    -webkit-animation-duration:1.2s;
    -moz-animation-duration:1.2s;
animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
animation-direction:normal;
    -o-animation-direction:normal;
    -ms-animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
         }

         #frotateG_01{
left:0;
top:51px;
animation-delay:0.45s;
    -o-animation-delay:0.45s;
    -ms-animation-delay:0.45s;
    -webkit-animation-delay:0.45s;
    -moz-animation-delay:0.45s;
       }

         #frotateG_02{
left:15px;
top:15px;
animation-delay:0.6s;
    -o-animation-delay:0.6s;
    -ms-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
       }

          #frotateG_03{
left:51px;
top:0;
animation-delay:0.75s;
    -o-animation-delay:0.75s;
    -ms-animation-delay:0.75s;
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
       }

    #frotateG_04{
right:15px;
top:15px;
animation-delay:0.9s;
    -o-animation-delay:0.9s;
    -ms-animation-delay:0.9s;
    -webkit-animation-delay:0.9s;
    -moz-animation-delay:0.9s;
    }

       #frotateG_05{
right:0;
top:51px;
animation-delay:1.05s;
    -o-animation-delay:1.05s;
    -ms-animation-delay:1.05s;
    -webkit-animation-delay:1.05s;
    -moz-animation-delay:1.05s;
      }

       #frotateG_06{
right:15px;
bottom:15px;
animation-delay:1.2s;
    -o-animation-delay:1.2s;
    -ms-animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
     }

       #frotateG_07{
left:51px;
bottom:0;
animation-delay:1.35s;
    -o-animation-delay:1.35s;
    -ms-animation-delay:1.35s;
    -webkit-animation-delay:1.35s;
    -moz-animation-delay:1.35s;
    }

       #frotateG_08{
left:15px;
bottom:15px;
animation-delay:1.5s;
    -o-animation-delay:1.5s;
    -ms-animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
   }



   @keyframes f_fadeG{
     0%{
    background-color:#087890;
    }

    100%{
      background-color:rgb(255,255,255);
    }
    }

     @-o-keyframes f_fadeG{
      0%{
           background-color:rgb(0,0,0);
       }

      100%{
         background-color:rgb(255,255,255);
        }
      }

      @-ms-keyframes f_fadeG{
        0%{
            background-color:rgb(0,0,0);
         }

       100%{
             background-color:rgb(255,255,255);
         }
       }

      @-webkit-keyframes f_fadeG{
       0%{
           background-color:rgb(0,0,0);
          }

       100%{
          background-color:rgb(255,255,255);
         }
         }

        @-moz-keyframes f_fadeG{
       0%{
          background-color:rgb(0,0,0);
        }

       100%{
           background-color:rgb(255,255,255);
        }
     }

Answer 1

您可以将整个预加载器包装在div中并将其置于中心位置，

<div style="height: 100%; width: 100%; left:0px; top:0px; right: 0px; bottom: 0px; margin:auto;">

并确保您的预加载器不会位于任何其他样式区域之间，例如<div>或<span>，这可能会改变高度和宽度属性。

希望这会有所帮助。：）

Answer 2

请尝试此代码可能会有所帮助

1-确保HTML AND BODY的宽度和高度为100％;

html,body {width:100%;height:100%;margin:0;padding:0;}

2-在outerDiv中添加宽度和高度100％

.outerDiv{
              position:relative;
              width:100%;
              height:100%;
             }

3-更改顶部：50％并添加margin-top：-62px;

.innerDiv{
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            bottom: 0;margin-top:-62px;
          }

Working Demo

Answer 3

无需定义.innerDiv属性或top：50％

.htaccess

如果没有相对父节点，它将在父节点上搜索具有相对位置的容器，然后它将将body作为亲戚。

Answer 4

只需像这样编辑“pace.css”中的“右侧”

.pace .pace-activity {
right: 500px;
}

如何将微调器加载到页面中心

4 个答案: