How to set my site loader in middle of screen

Question

I use a loader of my site but it's position of top of the page how to implement in css to align center of the sereen. Please check the my loader example Demo

**

 #fountainTextG{
 width:360px;
 margin:auto;
}

.fountainTextG{
 color:rgb(242,155,97);
 font-family:Arial;
 font-size:38px;
 text-decoration:none;
 font-weight:normal;
 font-style:normal;
 float:left;
 animation-name:bounce_fountainTextG;
  -o-animation-name:bounce_fountainTextG;
  -ms-animation-name:bounce_fountainTextG;
  -webkit-animation-name:bounce_fountainTextG;
  -moz-animation-name:bounce_fountainTextG;
 animation-duration:2.09s;
  -o-animation-duration:2.09s;
  -ms-animation-duration:2.09s;
  -webkit-animation-duration:2.09s;
  -moz-animation-duration:2.09s;
 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;
 transform:scale(.5);
  -o-transform:scale(.5);
  -ms-transform:scale(.5);
  -webkit-transform:scale(.5);
  -moz-transform:scale(.5);
}#fountainTextG_1{
 animation-delay:0.75s;
  -o-animation-delay:0.75s;
  -ms-animation-delay:0.75s;
  -webkit-animation-delay:0.75s;
  -moz-animation-delay:0.75s;
}
#fountainTextG_2{
 animation-delay:0.9s;
  -o-animation-delay:0.9s;
  -ms-animation-delay:0.9s;
  -webkit-animation-delay:0.9s;
  -moz-animation-delay:0.9s;
}
#fountainTextG_3{
 animation-delay:1.05s;
  -o-animation-delay:1.05s;
  -ms-animation-delay:1.05s;
  -webkit-animation-delay:1.05s;
  -moz-animation-delay:1.05s;
}
#fountainTextG_4{
 animation-delay:1.2s;
  -o-animation-delay:1.2s;
  -ms-animation-delay:1.2s;
  -webkit-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
}
#fountainTextG_5{
 animation-delay:1.35s;
  -o-animation-delay:1.35s;
  -ms-animation-delay:1.35s;
  -webkit-animation-delay:1.35s;
  -moz-animation-delay:1.35s;
}
#fountainTextG_6{
 animation-delay:1.5s;
  -o-animation-delay:1.5s;
  -ms-animation-delay:1.5s;
  -webkit-animation-delay:1.5s;
  -moz-animation-delay:1.5s;
}
#fountainTextG_7{
 animation-delay:1.64s;
  -o-animation-delay:1.64s;
  -ms-animation-delay:1.64s;
  -webkit-animation-delay:1.64s;
  -moz-animation-delay:1.64s;
}
#fountainTextG_8{
 animation-delay:1.79s;
  -o-animation-delay:1.79s;
  -ms-animation-delay:1.79s;
  -webkit-animation-delay:1.79s;
  -moz-animation-delay:1.79s;
}
@keyframes bounce_fountainTextG{
 0%{
  transform:scale(1);
  color:rgb(252,179,116);
 }

 100%{
  transform:scale(.5);
  color:rgb(255,255,255);
 }
}

@-o-keyframes bounce_fountainTextG{
 0%{
  -o-transform:scale(1);
  color:rgb(252,179,116);
 }

 100%{
  -o-transform:scale(.5);
  color:rgb(255,255,255);
 }
}

@-ms-keyframes bounce_fountainTextG{
 0%{
  -ms-transform:scale(1);
  color:rgb(252,179,116);
 }

 100%{
  -ms-transform:scale(.5);
  color:rgb(255,255,255);
 }
}

@-webkit-keyframes bounce_fountainTextG{
 0%{
  -webkit-transform:scale(1);
  color:rgb(252,179,116);
 }

 100%{
  -webkit-transform:scale(.5);
  color:rgb(255,255,255);
 }
}

@-moz-keyframes bounce_fountainTextG{
 0%{
  -moz-transform:scale(1);
  color:rgb(252,179,116);
 }

 100%{
  -moz-transform:scale(.5);
  color:rgb(255,255,255);
 }
}

<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">M</div><div id="fountainTextG_2" class="fountainTextG">e</div><div id="fountainTextG_3" class="fountainTextG">n</div><div id="fountainTextG_4" class="fountainTextG">s</div><div id="fountainTextG_5" class="fountainTextG">o</div><div id="fountainTextG_6" class="fountainTextG">f</div><div id="fountainTextG_7" class="fountainTextG">t</div><div id="fountainTextG_8" class="fountainTextG">s</div></div>

**

This loader made from pure css3 java script or other library not include with this.

Possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Turnip, Jun 02 '16 at 10:59

score 1 · Answer 1 · answered Jun 02 '16 at 11:00

Define your id #fountainTextG

position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -75px;

this css

 #fountainTextG{
 width: 360px;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -75px;
}

.fountainTextG{
 color:rgb(242,155,97);
 font-family:Arial;
 font-size:38px;
 text-decoration:none;
 font-weight:normal;
 font-style:normal;
 float:left;
 animation-name:bounce_fountainTextG;
  -o-animation-name:bounce_fountainTextG;
  -ms-animation-name:bounce_fountainTextG;
  -webkit-animation-name:bounce_fountainTextG;
  -moz-animation-name:bounce_fountainTextG;
 animation-duration:2.09s;
  -o-animation-duration:2.09s;
  -ms-animation-duration:2.09s;
  -webkit-animation-duration:2.09s;
  -moz-animation-duration:2.09s;
 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;
 transform:scale(.5);
  -o-transform:scale(.5);
  -ms-transform:scale(.5);
  -webkit-transform:scale(.5);
  -moz-transform:scale(.5);
}#fountainTextG_1{
 animation-delay:0.75s;
  -o-animation-delay:0.75s;
  -ms-animation-delay:0.75s;
  -webkit-animation-delay:0.75s;
  -moz-animation-delay:0.75s;
}
#fountainTextG_2{
 animation-delay:0.9s;
  -o-animation-delay:0.9s;
  -ms-animation-delay:0.9s;
  -webkit-animation-delay:0.9s;
  -moz-animation-delay:0.9s;
}
#fountainTextG_3{
 animation-delay:1.05s;
  -o-animation-delay:1.05s;
  -ms-animation-delay:1.05s;
  -webkit-animation-delay:1.05s;
  -moz-animation-delay:1.05s;
}
#fountainTextG_4{
 animation-delay:1.2s;
  -o-animation-delay:1.2s;
  -ms-animation-delay:1.2s;
  -webkit-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
}
#fountainTextG_5{
 animation-delay:1.35s;
  -o-animation-delay:1.35s;
  -ms-animation-delay:1.35s;
  -webkit-animation-delay:1.35s;
  -moz-animation-delay:1.35s;
}
#fountainTextG_6{
 animation-delay:1.5s;
  -o-animation-delay:1.5s;
  -ms-animation-delay:1.5s;
  -webkit-animation-delay:1.5s;
  -moz-animation-delay:1.5s;
}
#fountainTextG_7{
 animation-delay:1.64s;
  -o-animation-delay:1.64s;
  -ms-animation-delay:1.64s;
  -webkit-animation-delay:1.64s;
  -moz-animation-delay:1.64s;
}
#fountainTextG_8{
 animation-delay:1.79s;
  -o-animation-delay:1.79s;
  -ms-animation-delay:1.79s;
  -webkit-animation-delay:1.79s;
  -moz-animation-delay:1.79s;
}
@keyframes bounce_fountainTextG{
 0%{
  transform:scale(1);
  color:rgb(252,179,116);
 }

 100%{
  transform:scale(.5);
  color:rgb(255,255,255);
 }
}

@-o-keyframes bounce_fountainTextG{
 0%{
  -o-transform:scale(1);
  color:rgb(252,179,116);
 }

 100%{
  -o-transform:scale(.5);
  color:rgb(255,255,255);
 }
}

@-ms-keyframes bounce_fountainTextG{
 0%{
  -ms-transform:scale(1);
  color:rgb(252,179,116);
 }

 100%{
  -ms-transform:scale(.5);
  color:rgb(255,255,255);
 }
}

@-webkit-keyframes bounce_fountainTextG{
 0%{
  -webkit-transform:scale(1);
  color:rgb(252,179,116);
 }

 100%{
  -webkit-transform:scale(.5);
  color:rgb(255,255,255);
 }
}

@-moz-keyframes bounce_fountainTextG{
 0%{
  -moz-transform:scale(1);
  color:rgb(252,179,116);
 }

 100%{
  -moz-transform:scale(.5);
  color:rgb(255,255,255);
 }
}

<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">M</div><div id="fountainTextG_2" class="fountainTextG">e</div><div id="fountainTextG_3" class="fountainTextG">n</div><div id="fountainTextG_4" class="fountainTextG">s</div><div id="fountainTextG_5" class="fountainTextG">o</div><div id="fountainTextG_6" class="fountainTextG">f</div><div id="fountainTextG_7" class="fountainTextG">t</div><div id="fountainTextG_8" class="fountainTextG">s</div></div>

thanks Mr. Rohit but why use position, for center position we used table or table-cell. — Anmol Ratan Mohla, Jun 02 '16 at 11:04
yes you can used to display:table-cell; text-align:center;vertical-align:middle; They are many more method do to this — Rohit Azad Malik, Jun 02 '16 at 11:06

score 0 · Answer 2 · answered Jun 02 '16 at 11:00

Put position: fixed and left/top to 50%. Using negative margin move element back via it's half width/height.

Also instead of flaot: left; use display: inline-block

#fountainTextG {
  width: 360px;
  margin: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -20px;
  margin-left: -180px;
  text-align: center;
}
.fountainTextG {
  color: rgb(242, 155, 97);
  font-family: Arial;
  font-size: 38px;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  animation-name: bounce_fountainTextG;
  -o-animation-name: bounce_fountainTextG;
  -ms-animation-name: bounce_fountainTextG;
  -webkit-animation-name: bounce_fountainTextG;
  -moz-animation-name: bounce_fountainTextG;
  animation-duration: 2.09s;
  -o-animation-duration: 2.09s;
  -ms-animation-duration: 2.09s;
  -webkit-animation-duration: 2.09s;
  -moz-animation-duration: 2.09s;
  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;
  transform: scale(.5);
  -o-transform: scale(.5);
  -ms-transform: scale(.5);
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
}
#fountainTextG_1 {
  animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  -ms-animation-delay: 0.75s;
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
}
#fountainTextG_2 {
  animation-delay: 0.9s;
  -o-animation-delay: 0.9s;
  -ms-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
}
#fountainTextG_3 {
  animation-delay: 1.05s;
  -o-animation-delay: 1.05s;
  -ms-animation-delay: 1.05s;
  -webkit-animation-delay: 1.05s;
  -moz-animation-delay: 1.05s;
}
#fountainTextG_4 {
  animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  -ms-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
}
#fountainTextG_5 {
  animation-delay: 1.35s;
  -o-animation-delay: 1.35s;
  -ms-animation-delay: 1.35s;
  -webkit-animation-delay: 1.35s;
  -moz-animation-delay: 1.35s;
}
#fountainTextG_6 {
  animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
}
#fountainTextG_7 {
  animation-delay: 1.64s;
  -o-animation-delay: 1.64s;
  -ms-animation-delay: 1.64s;
  -webkit-animation-delay: 1.64s;
  -moz-animation-delay: 1.64s;
}
#fountainTextG_8 {
  animation-delay: 1.79s;
  -o-animation-delay: 1.79s;
  -ms-animation-delay: 1.79s;
  -webkit-animation-delay: 1.79s;
  -moz-animation-delay: 1.79s;
}
@keyframes bounce_fountainTextG {
  0% {
    transform: scale(1);
    color: rgb(252, 179, 116);
  }
  100% {
    transform: scale(.5);
    color: rgb(255, 255, 255);
  }
}
@-o-keyframes bounce_fountainTextG {
  0% {
    -o-transform: scale(1);
    color: rgb(252, 179, 116);
  }
  100% {
    -o-transform: scale(.5);
    color: rgb(255, 255, 255);
  }
}
@-ms-keyframes bounce_fountainTextG {
  0% {
    -ms-transform: scale(1);
    color: rgb(252, 179, 116);
  }
  100% {
    -ms-transform: scale(.5);
    color: rgb(255, 255, 255);
  }
}
@-webkit-keyframes bounce_fountainTextG {
  0% {
    -webkit-transform: scale(1);
    color: rgb(252, 179, 116);
  }
  100% {
    -webkit-transform: scale(.5);
    color: rgb(255, 255, 255);
  }
}
@-moz-keyframes bounce_fountainTextG {
  0% {
    -moz-transform: scale(1);
    color: rgb(252, 179, 116);
  }
  100% {
    -moz-transform: scale(.5);
    color: rgb(255, 255, 255);
  }
}

<div id="fountainTextG">
  <div id="fountainTextG_1" class="fountainTextG">M</div>
  <div id="fountainTextG_2" class="fountainTextG">e</div>
  <div id="fountainTextG_3" class="fountainTextG">n</div>
  <div id="fountainTextG_4" class="fountainTextG">s</div>
  <div id="fountainTextG_5" class="fountainTextG">o</div>
  <div id="fountainTextG_6" class="fountainTextG">f</div>
  <div id="fountainTextG_7" class="fountainTextG">t</div>
  <div id="fountainTextG_8" class="fountainTextG">s</div>
</div>

How to set my site loader in middle of screen

2 Answers2