我使用我网站的加载程序,但它位于页面顶部的位置如何在 css 中实现以对齐 sereen 的中心。请检查我的加载程序示例 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>
**
此加载器由纯 css3 java 脚本或其他不包含在其中的库制作。
最佳答案
定义你的 id #fountainTextG
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -75px;
这个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>
关于html - 如何在屏幕中间设置我的网站加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37589833/