如何让微调器加载项目到页面中心

Question

嗨，以下是我的HTML结构。请不要更改HTML结构。 请有人帮我解决吗？

即使试用它第一外格“相对位置”和innerDiv“位置绝对保证金自动”和所有的，但它仍然在浏览器

  <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和车身宽度和高度的100％;

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

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

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

3-更改顶部：50％，并添加边距：-62px;

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

Working Demo

Answer 3

不需要定义.innerDiv财产或顶部：50％

#floatingCirclesG{ 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     margin:auto; 
     height:/* put your height */; 
     width:/* put your width */; } 

它将搜索容器父节点上的相对位置，如果没有相对的父母，然后它会以身体为亲属。