如何在屏幕中间设置我的网站加载程序

Question

我使用我网站的加载器，但它位于页面顶部的位置，如何在 css 中实现以对齐 sereen 的中心。请查看我的加载器示例演示

**

	#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 脚本或其他库组成的加载器不包含在内。

Answer 1

定义您的 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>

Answer 2

把position: fixed和left/top放到50% .使用负边距将元素通过其半宽/高向后移动。

也代替flaot: left;使用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>