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

Question

Hi the following is the my HTML structure. Please don't change HTML structure. Please any one can help me out ?

Even try it out for first outer div "position relative" and innerDiv "position absolute margin auto " and all but it still at top of the browser

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

following is the my css file

      .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

You can wrap the entire preloader in a div and center it like,

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

and make sure, your preloader doesn't lie between any other styling zones, like <div> or <span> which could alter the height and width properties.

Hope this helps. :)

Answer 2

Please try this code maybe can help

1- Make sure HTML AND BODY width and height 100%;

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

2- Add width and height 100% in outerDiv

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

3- Change top:50% and add margin-top:-62px;

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

Working Demo

Answer 3

No need to define .innerDiv property or top:50%

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

It will search container with relative position on parent node if there is no relative parent then it will take body as a relative.

Answer 4

just edit the "right" in pace.css like this

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