Home / Questions / 142257
Accepted
Hoose
Asked: 2020-02-29 10:55:59 +0800 CST 2020-02-29 10:55:59 +0800 CST

垂直和水平居中 div

  • 772

我正在学习使用 CSS3 关键帧和动画。

我正在创建一个 Galaxy，我想放置一个文本，但我无法垂直居中，我已经尝试了所有方法但我没有成功。我该怎么做？

* {
  padding:0;
  margin:0;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-5000px 5000px;}
}
@keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes move-clouds-back-red {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes small-meteor {
  0%   {background-size:15px;}
  25%  {background-size:20px;}
  50%  {background-size:25px;}
  75%  {background-size:20px;}
  100% {background-size:15px;}
}

@keyframes move-meteor1-sm {
  from {background-position:500px -500px;}
  to   {background-position:80px 900px;}
}
@keyframes move-meteor2-sm{
  from {background-position:800px -80px;}
  to   {background-position:380px 900px;}
}
@keyframes move-meteor3-sm{
  from {background-position:100px -300px;}
  to   {background-position:-180px 900px;}
}
@keyframes move-meteor4-sm{
  from {background-position:2500px 100px;}
  to   {background-position:1200px 900px;}
}
@keyframes move-meteor5-sm{
  from {background-position:1200px 100px;}
  to   {background-position:800px 900px;}
}

@keyframes big-meteor {
  0%   {background-size:35px;}
  25%  {background-size:45px;}
  50%  {background-size:55px;}
  75%  {background-size:45px;}
  100% {background-size:35px;}
}
@keyframes move-meteor1-bg{
  from {background-position:680px -150px;}
  to   {background-position:100px 900px;}
}
@keyframes move-meteor2-bg{
  from {background-position:1500px -10px;}
  to   {background-position:850px 900px;}
}
@keyframes move-meteor3-bg{
  from {background-position:1000px -500px;}
  to   {background-position:450px 900px;}
}
@keyframes move-meteor4-bg{
  from {background-position:250px -850px;}
  to   {background-position:-550px 900px;}
}

@keyframes medium-meteor{
  0%   {background-size:25px;}
  25%  {background-size:30px;}
  50%  {background-size:35px;}
  75%  {background-size:30px;}
  100% {background-size:25px;}
}

@keyframes move-meteor1-md{
  from {background-position:380px -10px;}
  to   {background-position:-450px 1900px;}
}
@keyframes move-meteor2-md{
  from {background-position:950px -10px;}
  to   {background-position:450px 1900px;}
}
 
@keyframes brightness-sun{
  20%  {box-shadow: 0px 0px 40px 3px #FF7A20;
  background-color: #ff6700;}
  40%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  60%  {box-shadow: 0px 0px 40px 7px #FF7A20;
  background-color: #ff6700;}
  80%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  100% {box-shadow: 0px 0px 40px 0px #FF9120;
  background-color: #ff8100;}
}

/*@keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}*/

#stars, #twinkling, #clouds-red, #clouds-red2, #clouds-red3, #clouds-black, .meteor,
#container-sun
{
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  position:absolute;
}

/*
** Sun
*/
#container-sun{
  top:-65px;
  left:-75px;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:50%;
  background-color: #ff8100;
  opacity:0.75;
  box-shadow: 0px 0px 40px 0px #FF9120; 
  animation: brightness-sun 10s linear infinite;
}

#container-sun > .container-ray {
  position:absolute;
  margin:auto;
  top:0px;
  left:0;
  right:0;
  bottom:0;
  width:70px;
  animation: ray_anim 120s linear infinite;
}

#container-sun > .container-ray > .ray {
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
		background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
  
  z-index:2;
    opacity:0.2;
}

.ray-bg{
  height:170px;
  width:20px;
}
@keyframes size-ray-sm{ 
	0%   {height:100px;}
  10%  {height:95px;}
  20%  {height:90px;}
  30%  {height:85px;}
  40%  {height:80px;}
  50%  {height:75px;}
  60%  {height:80px;}
  70%  {height:85px;}
  80%  {height:90px;}
  90%  {height:95px;}
  100% {height:100px;}
}
.ray-sm{
  height: 100px;
  width: 10px;
}

/*Big ray*/
.ray1 {    
    transform: rotate(360deg);
    top:165px;
    left: 15px;
}

.ray-sm.ray2{
  animation: size-ray-sm 3s linear infinite, move-ray2 3s linear infinite;
}
@keyframes move-ray2{
  0% {transform: rotate(-30deg);top: 150px;left: 85px;}
  10% {left:84px;}
  20% {left:83px;}
  30% {left:82px;}
  40% {left:81px;}
  50% {transform: rotate(-31deg);left:80px;}
  60% {left:81px;}
  70% {left:82px;}
  80% {left:83px;}
  90% {left:84px;}
  100% {transform: rotate(-30deg);top: 150px;left: 85px;}
}

.ray-sm.ray4{
  animation: size-ray-sm 3s linear infinite, move-ray4 3s linear infinite;
} 
@keyframes move-ray4{
  0% {transform: rotate(-78deg);top: 45px;left: 150px;}
  10% {left:149px;}
  20% {top:46px;left:148px;}
  30% {left:147px;}
  40% {left:146px;}
  50% { transform: rotate(-79deg);left:145px;}
  60% {left:146px;}
  70% {left:147px;}
  80% {top:46px;left:148px;}
  90% {left:149px;}
  100% {transform: rotate(-78deg);top: 45px;left: 150px;}
}
/*Small ray*/
.ray2 {    
    transform: rotate(-30deg);
    top: 150px;
    left: 85px;
}

/*Big ray*/
.ray3 {
  transform: rotate(-50deg);
  top: 95px;
  left: 150px; 
}

/*Small ray*/
.ray4 {
  transform: rotate(-78deg);
  top: 45px;
  left: 150px;   
}

.meteor{
  /*background: transparent url('https://image.flaticon.com/icons/svg/139/139699.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/180/180707.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/728/728096.svg') no-repeat top center;*/
  background: transparent url('http://i.imgur.com/KgvLW3q.png') no-repeat top center;
  /*background: transparent url('https://i.imgur.com/hwRmI29.png') no-repeat top center;*/
  
  background-size:25px;
}

/*
** Small meteors
*/

.meteor1-sm, .meteor2-sm, .meteor3-sm, .meteor4-sm, .meteor5-sm{
  z-index:2;
}

.meteor1-sm{
  animation:small-meteor 16s linear infinite, move-meteor1-sm 16s linear infinite;
}

.meteor2-sm{
  animation:small-meteor 16s linear infinite, move-meteor2-sm 16s linear infinite;
}

.meteor3-sm{
  animation:small-meteor 16s linear infinite, move-meteor3-sm 16s linear infinite;
}

.meteor4-sm{
  animation:small-meteor 16s linear infinite, move-meteor4-sm 16s linear infinite;
}

.meteor5-sm{
  animation:small-meteor 16s linear infinite, move-meteor5-sm 16s linear infinite;
}

/*
** Big meteors
*/

.meteor1-bg, .meteor2-bg, .meteor3-bg, .meteor4-bg{
  z-index:6;
}
.meteor1-bg{
  animation:big-meteor 8s linear infinite, move-meteor1-bg 8s linear infinite;
}

.meteor2-bg{
  animation:big-meteor 8s linear infinite, move-meteor2-bg 8s linear infinite;
}

.meteor3-bg{
  animation:big-meteor 8s linear infinite, move-meteor3-bg 8s linear infinite;
}

.meteor4-bg{
  animation:big-meteor 8s linear infinite, move-meteor4-bg 8s linear infinite; 
}

/*
** Medium meteors
*/
.meteor1-md, .meteor2-md{
  z-index:4;
}

.meteor1-md{
  animation:medium-meteor 12s linear infinite, move-meteor1-md 12s linear infinite; 
}

.meteor2-md{
  animation:medium-meteor 12s linear infinite, move-meteor2-md 12s linear infinite; 
}

/*
** Stars
*/

#stars {
  background:#000 url('http://www.script-tutorials.com/demos/360/images/stars.png') repeat top center;
  z-index:0;
}


/*
** Twinkling stars
*/
#twinkling{
  background:transparent url('http://www.script-tutorials.com/demos/360/images/twinkling.png') repeat top center;
  z-index:1;
  
  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 150s linear infinite;
  animation:move-twink-back 150s linear infinite;
}

/*
** Black clouds
*/
#clouds-black{
    background:transparent url('http://www.script-tutorials.com/demos/360/images/clouds2.png') repeat-x left top;
  z-index:2;
   opacity:0.7;
  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 280s linear infinite;
}

/*
** Red clouds
*/

#clouds-red {
  z-index:3;
}

/*
** Movement of red clouds
*/
#clouds-red, #clouds-red2, #clouds-red3 {
  background: transparent url('http://www.script-tutorials.com/demos/360/images/clouds3.png') repeat-x left center;
  
  -moz-animation:move-clouds-back-red 200s linear infinite;
  -ms-animation:move-clouds-back-red 200s linear infinite;
  -o-animation:move-clouds-back-red 200s linear infinite;
  -webkit-animation:move-clouds-back-red 200s linear infinite;
  animation:move-clouds-back-red 200s linear infinite;
}
#clouds-red2{
  z-index:4;
}
#clouds-red3{
  z-index:5;
}

#word{
  width:100%;
  height:100%;
  text-align:center;
}

#word:before{
  content: "";
  display:inline-block;
  vertical-align:middle;
  height:100%;
}
 
#word > div{
  max-width:100%;
  display:inline-block;
  vertical-align:middle;
  font-size:50px;
  z-index:10;
  background: orange;
  position:absolute;
  color: #FFDD1B;
  font-family: Pacifico;
}

#word > div:hover{
  color:#FFF;
  animation: neon 1s ease-in-out infinite alternate;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
<div id="word">
  <div>Galaxy</div>
</div>
<div id="container-sun">
  <div class="container-ray">
    <div class="ray ray-bg ray1"></div>
    <div class="ray ray-sm ray2"></div>
    <div class="ray ray-bg ray3"></div>
    <div class="ray ray-sm ray4"></div>
  </div>
</div>
<div id="stars"></div>
<div id="twinkling"></div>
<div id="clouds-red"></div>
<div id="clouds-red2"></div>
<div class="meteor meteor1-sm"></div>
<div class="meteor meteor2-sm"></div>
<div class="meteor meteor3-sm"></div>
<div class="meteor meteor4-sm"></div>
<div class="meteor meteor1-md"></div>
<div class="meteor meteor2-md"></div>
<div class="meteor meteor1-bg"></div>
<div class="meteor meteor2-bg"></div>
<div class="meteor meteor3-bg"></div>
<div class="meteor meteor4-bg"></div>
<div id="clouds-red3"></div>
<div id="clouds-black"></div>

css

4 Answers

  1. Hay varias formas de centrar un div una de ellas es poniendo el siguiente estilo. Lo que hace el estilo es calcular la distancia que debe estar desde el top y left con tu div (en este caso el 50% del div conetenedor) y solo son aplicables cuando se tiene el atributo position en el valor absolute o fixed hasta ese punto la esquina superior izquierda de tu div seria el centro del div contenedor. Para centrar el div interno se usa después el transform mas el translate que lo centra a ese punto exacto del centro tanto vertical y horizontal.

    .div-center {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

    }

    Ejemplo Modificado

    * {
  padding:0;
  margin:0;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-5000px 5000px;}
}
@keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes move-clouds-back-red {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes small-meteor {
  0%   {background-size:15px;}
  25%  {background-size:20px;}
  50%  {background-size:25px;}
  75%  {background-size:20px;}
  100% {background-size:15px;}
}

@keyframes move-meteor1-sm {
  from {background-position:500px -500px;}
  to   {background-position:80px 900px;}
}
@keyframes move-meteor2-sm{
  from {background-position:800px -80px;}
  to   {background-position:380px 900px;}
}
@keyframes move-meteor3-sm{
  from {background-position:100px -300px;}
  to   {background-position:-180px 900px;}
}
@keyframes move-meteor4-sm{
  from {background-position:2500px 100px;}
  to   {background-position:1200px 900px;}
}
@keyframes move-meteor5-sm{
  from {background-position:1200px 100px;}
  to   {background-position:800px 900px;}
}

@keyframes big-meteor {
  0%   {background-size:35px;}
  25%  {background-size:45px;}
  50%  {background-size:55px;}
  75%  {background-size:45px;}
  100% {background-size:35px;}
}
@keyframes move-meteor1-bg{
  from {background-position:680px -150px;}
  to   {background-position:100px 900px;}
}
@keyframes move-meteor2-bg{
  from {background-position:1500px -10px;}
  to   {background-position:850px 900px;}
}
@keyframes move-meteor3-bg{
  from {background-position:1000px -500px;}
  to   {background-position:450px 900px;}
}
@keyframes move-meteor4-bg{
  from {background-position:250px -850px;}
  to   {background-position:-550px 900px;}
}

@keyframes medium-meteor{
  0%   {background-size:25px;}
  25%  {background-size:30px;}
  50%  {background-size:35px;}
  75%  {background-size:30px;}
  100% {background-size:25px;}
}

@keyframes move-meteor1-md{
  from {background-position:380px -10px;}
  to   {background-position:-450px 1900px;}
}
@keyframes move-meteor2-md{
  from {background-position:950px -10px;}
  to   {background-position:450px 1900px;}
}
 
@keyframes brightness-sun{
  20%  {box-shadow: 0px 0px 40px 3px #FF7A20;
  background-color: #ff6700;}
  40%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  60%  {box-shadow: 0px 0px 40px 7px #FF7A20;
  background-color: #ff6700;}
  80%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  100% {box-shadow: 0px 0px 40px 0px #FF9120;
  background-color: #ff8100;}
}

/*@keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}*/

#stars, #twinkling, #clouds-red, #clouds-red2, #clouds-red3, #clouds-black, .meteor,
#container-sun
{
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  position:absolute;
}

/*
** Sun
*/
#container-sun{
  top:-65px;
  left:-75px;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:50%;
  background-color: #ff8100;
  opacity:0.75;
  box-shadow: 0px 0px 40px 0px #FF9120; 
  animation: brightness-sun 10s linear infinite;
}

#container-sun > .container-ray {
  position:absolute;
  margin:auto;
  top:0px;
  left:0;
  right:0;
  bottom:0;
  width:70px;
  animation: ray_anim 120s linear infinite;
}

#container-sun > .container-ray > .ray {
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
		background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
  
  z-index:2;
    opacity:0.2;
}

.ray-bg{
  height:170px;
  width:20px;
}
@keyframes size-ray-sm{ 
	0%   {height:100px;}
  10%  {height:95px;}
  20%  {height:90px;}
  30%  {height:85px;}
  40%  {height:80px;}
  50%  {height:75px;}
  60%  {height:80px;}
  70%  {height:85px;}
  80%  {height:90px;}
  90%  {height:95px;}
  100% {height:100px;}
}
.ray-sm{
  height: 100px;
  width: 10px;
}

/*Big ray*/
.ray1 {    
    transform: rotate(360deg);
    top:165px;
    left: 15px;
}

.ray-sm.ray2{
  animation: size-ray-sm 3s linear infinite, move-ray2 3s linear infinite;
}
@keyframes move-ray2{
  0% {transform: rotate(-30deg);top: 150px;left: 85px;}
  10% {left:84px;}
  20% {left:83px;}
  30% {left:82px;}
  40% {left:81px;}
  50% {transform: rotate(-31deg);left:80px;}
  60% {left:81px;}
  70% {left:82px;}
  80% {left:83px;}
  90% {left:84px;}
  100% {transform: rotate(-30deg);top: 150px;left: 85px;}
}

.ray-sm.ray4{
  animation: size-ray-sm 3s linear infinite, move-ray4 3s linear infinite;
} 
@keyframes move-ray4{
  0% {transform: rotate(-78deg);top: 45px;left: 150px;}
  10% {left:149px;}
  20% {top:46px;left:148px;}
  30% {left:147px;}
  40% {left:146px;}
  50% { transform: rotate(-79deg);left:145px;}
  60% {left:146px;}
  70% {left:147px;}
  80% {top:46px;left:148px;}
  90% {left:149px;}
  100% {transform: rotate(-78deg);top: 45px;left: 150px;}
}
/*Small ray*/
.ray2 {    
    transform: rotate(-30deg);
    top: 150px;
    left: 85px;
}

/*Big ray*/
.ray3 {
  transform: rotate(-50deg);
  top: 95px;
  left: 150px; 
}

/*Small ray*/
.ray4 {
  transform: rotate(-78deg);
  top: 45px;
  left: 150px;   
}

.meteor{
  /*background: transparent url('https://image.flaticon.com/icons/svg/139/139699.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/180/180707.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/728/728096.svg') no-repeat top center;*/
  background: transparent url('http://i.imgur.com/KgvLW3q.png') no-repeat top center;
  /*background: transparent url('https://i.imgur.com/hwRmI29.png') no-repeat top center;*/
  
  background-size:25px;
}

/*
** Small meteors
*/

.meteor1-sm, .meteor2-sm, .meteor3-sm, .meteor4-sm, .meteor5-sm{
  z-index:2;
}

.meteor1-sm{
  animation:small-meteor 16s linear infinite, move-meteor1-sm 16s linear infinite;
}

.meteor2-sm{
  animation:small-meteor 16s linear infinite, move-meteor2-sm 16s linear infinite;
}

.meteor3-sm{
  animation:small-meteor 16s linear infinite, move-meteor3-sm 16s linear infinite;
}

.meteor4-sm{
  animation:small-meteor 16s linear infinite, move-meteor4-sm 16s linear infinite;
}

.meteor5-sm{
  animation:small-meteor 16s linear infinite, move-meteor5-sm 16s linear infinite;
}

/*
** Big meteors
*/

.meteor1-bg, .meteor2-bg, .meteor3-bg, .meteor4-bg{
  z-index:6;
}
.meteor1-bg{
  animation:big-meteor 8s linear infinite, move-meteor1-bg 8s linear infinite;
}

.meteor2-bg{
  animation:big-meteor 8s linear infinite, move-meteor2-bg 8s linear infinite;
}

.meteor3-bg{
  animation:big-meteor 8s linear infinite, move-meteor3-bg 8s linear infinite;
}

.meteor4-bg{
  animation:big-meteor 8s linear infinite, move-meteor4-bg 8s linear infinite; 
}

/*
** Medium meteors
*/
.meteor1-md, .meteor2-md{
  z-index:4;
}

.meteor1-md{
  animation:medium-meteor 12s linear infinite, move-meteor1-md 12s linear infinite; 
}

.meteor2-md{
  animation:medium-meteor 12s linear infinite, move-meteor2-md 12s linear infinite; 
}

/*
** Stars
*/

#stars {
  background:#000 url('http://www.script-tutorials.com/demos/360/images/stars.png') repeat top center;
  z-index:0;
}


/*
** Twinkling stars
*/
#twinkling{
  background:transparent url('http://www.script-tutorials.com/demos/360/images/twinkling.png') repeat top center;
  z-index:1;
  
  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 150s linear infinite;
  animation:move-twink-back 150s linear infinite;
}

/*
** Black clouds
*/
#clouds-black{
    background:transparent url('http://www.script-tutorials.com/demos/360/images/clouds2.png') repeat-x left top;
  z-index:2;
   opacity:0.7;
  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 280s linear infinite;
}

/*
** Red clouds
*/

#clouds-red {
  z-index:3;
}

/*
** Movement of red clouds
*/
#clouds-red, #clouds-red2, #clouds-red3 {
  background: transparent url('http://www.script-tutorials.com/demos/360/images/clouds3.png') repeat-x left center;
  
  -moz-animation:move-clouds-back-red 200s linear infinite;
  -ms-animation:move-clouds-back-red 200s linear infinite;
  -o-animation:move-clouds-back-red 200s linear infinite;
  -webkit-animation:move-clouds-back-red 200s linear infinite;
  animation:move-clouds-back-red 200s linear infinite;
}
#clouds-red2{
  z-index:4;
}
#clouds-red3{
  z-index:5;
}

#word{
  width:100%;
  height:100%;
  text-align:center;
}

#word:before{
  content: "";
  display:inline-block;
  vertical-align:middle;
  height:100%;
}
 
#word > div{
  max-width:100%;
  display:inline-block;
  vertical-align:middle;
  font-size:50px;
  z-index:10;
  background: orange;
  position:absolute;
  color: #FFDD1B;
  font-family: Pacifico;
}

#word > div:hover{
  color:#FFF;
  animation: neon 1s ease-in-out infinite alternate;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}

.div-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
    <div id="word"  >
  <div class="div-center">Galaxy</div>
</div>
<div id="container-sun">
  <div class="container-ray">
    <div class="ray ray-bg ray1"></div>
    <div class="ray ray-sm ray2"></div>
    <div class="ray ray-bg ray3"></div>
    <div class="ray ray-sm ray4"></div>
  </div>
</div>
<div id="stars"></div>
<div id="twinkling"></div>
<div id="clouds-red"></div>
<div id="clouds-red2"></div>
<div class="meteor meteor1-sm"></div>
<div class="meteor meteor2-sm"></div>
<div class="meteor meteor3-sm"></div>
<div class="meteor meteor4-sm"></div>
<div class="meteor meteor1-md"></div>
<div class="meteor meteor2-md"></div>
<div class="meteor meteor1-bg"></div>
<div class="meteor meteor2-bg"></div>
<div class="meteor meteor3-bg"></div>
<div class="meteor meteor4-bg"></div>
<div id="clouds-red3"></div>
<div id="clouds-black"></div>

    • 2
  2. Best Answer

    flexbox 的一个选项，使用其著名的属性在两个轴上居中：

    display:flex;
justify-content: center;
align-items: center;

    尽管您必须添加典型代码：

    body, html {
  height: 100%;
}

    我无法快速检查这是否会影响某些动画。

    * {
  padding:0;
  margin:0;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-5000px 5000px;}
}
@keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes move-clouds-back-red {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes small-meteor {
  0%   {background-size:15px;}
  25%  {background-size:20px;}
  50%  {background-size:25px;}
  75%  {background-size:20px;}
  100% {background-size:15px;}
}

@keyframes move-meteor1-sm {
  from {background-position:500px -500px;}
  to   {background-position:80px 900px;}
}
@keyframes move-meteor2-sm{
  from {background-position:800px -80px;}
  to   {background-position:380px 900px;}
}
@keyframes move-meteor3-sm{
  from {background-position:100px -300px;}
  to   {background-position:-180px 900px;}
}
@keyframes move-meteor4-sm{
  from {background-position:2500px 100px;}
  to   {background-position:1200px 900px;}
}
@keyframes move-meteor5-sm{
  from {background-position:1200px 100px;}
  to   {background-position:800px 900px;}
}

@keyframes big-meteor {
  0%   {background-size:35px;}
  25%  {background-size:45px;}
  50%  {background-size:55px;}
  75%  {background-size:45px;}
  100% {background-size:35px;}
}
@keyframes move-meteor1-bg{
  from {background-position:680px -150px;}
  to   {background-position:100px 900px;}
}
@keyframes move-meteor2-bg{
  from {background-position:1500px -10px;}
  to   {background-position:850px 900px;}
}
@keyframes move-meteor3-bg{
  from {background-position:1000px -500px;}
  to   {background-position:450px 900px;}
}
@keyframes move-meteor4-bg{
  from {background-position:250px -850px;}
  to   {background-position:-550px 900px;}
}

@keyframes medium-meteor{
  0%   {background-size:25px;}
  25%  {background-size:30px;}
  50%  {background-size:35px;}
  75%  {background-size:30px;}
  100% {background-size:25px;}
}

@keyframes move-meteor1-md{
  from {background-position:380px -10px;}
  to   {background-position:-450px 1900px;}
}
@keyframes move-meteor2-md{
  from {background-position:950px -10px;}
  to   {background-position:450px 1900px;}
}
 
@keyframes brightness-sun{
  20%  {box-shadow: 0px 0px 40px 3px #FF7A20;
  background-color: #ff6700;}
  40%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  60%  {box-shadow: 0px 0px 40px 7px #FF7A20;
  background-color: #ff6700;}
  80%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  100% {box-shadow: 0px 0px 40px 0px #FF9120;
  background-color: #ff8100;}
}

/*@keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}*/

#stars, #twinkling, #clouds-red, #clouds-red2, #clouds-red3, #clouds-black, .meteor,
#container-sun
{
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  position:absolute;
}

/*
** Sun
*/
#container-sun{
  top:-65px;
  left:-75px;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:50%;
  background-color: #ff8100;
  opacity:0.75;
  box-shadow: 0px 0px 40px 0px #FF9120; 
  animation: brightness-sun 10s linear infinite;
}

#container-sun > .container-ray {
  position:absolute;
  margin:auto;
  top:0px;
  left:0;
  right:0;
  bottom:0;
  width:70px;
  animation: ray_anim 120s linear infinite;
}

#container-sun > .container-ray > .ray {
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
		background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
  
  z-index:2;
    opacity:0.2;
}

.ray-bg{
  height:170px;
  width:20px;
}
@keyframes size-ray-sm{ 
	0%   {height:100px;}
  10%  {height:95px;}
  20%  {height:90px;}
  30%  {height:85px;}
  40%  {height:80px;}
  50%  {height:75px;}
  60%  {height:80px;}
  70%  {height:85px;}
  80%  {height:90px;}
  90%  {height:95px;}
  100% {height:100px;}
}
.ray-sm{
  height: 100px;
  width: 10px;
}

/*Big ray*/
.ray1 {    
    transform: rotate(360deg);
    top:165px;
    left: 15px;
}

.ray-sm.ray2{
  animation: size-ray-sm 3s linear infinite, move-ray2 3s linear infinite;
}
@keyframes move-ray2{
  0% {transform: rotate(-30deg);top: 150px;left: 85px;}
  10% {left:84px;}
  20% {left:83px;}
  30% {left:82px;}
  40% {left:81px;}
  50% {transform: rotate(-31deg);left:80px;}
  60% {left:81px;}
  70% {left:82px;}
  80% {left:83px;}
  90% {left:84px;}
  100% {transform: rotate(-30deg);top: 150px;left: 85px;}
}

.ray-sm.ray4{
  animation: size-ray-sm 3s linear infinite, move-ray4 3s linear infinite;
} 
@keyframes move-ray4{
  0% {transform: rotate(-78deg);top: 45px;left: 150px;}
  10% {left:149px;}
  20% {top:46px;left:148px;}
  30% {left:147px;}
  40% {left:146px;}
  50% { transform: rotate(-79deg);left:145px;}
  60% {left:146px;}
  70% {left:147px;}
  80% {top:46px;left:148px;}
  90% {left:149px;}
  100% {transform: rotate(-78deg);top: 45px;left: 150px;}
}
/*Small ray*/
.ray2 {    
    transform: rotate(-30deg);
    top: 150px;
    left: 85px;
}

/*Big ray*/
.ray3 {
  transform: rotate(-50deg);
  top: 95px;
  left: 150px; 
}

/*Small ray*/
.ray4 {
  transform: rotate(-78deg);
  top: 45px;
  left: 150px;   
}

.meteor{
  /*background: transparent url('https://image.flaticon.com/icons/svg/139/139699.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/180/180707.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/728/728096.svg') no-repeat top center;*/
  background: transparent url('http://i.imgur.com/KgvLW3q.png') no-repeat top center;
  /*background: transparent url('https://i.imgur.com/hwRmI29.png') no-repeat top center;*/
  
  background-size:25px;
}

/*
** Small meteors
*/

.meteor1-sm, .meteor2-sm, .meteor3-sm, .meteor4-sm, .meteor5-sm{
  z-index:2;
}

.meteor1-sm{
  animation:small-meteor 16s linear infinite, move-meteor1-sm 16s linear infinite;
}

.meteor2-sm{
  animation:small-meteor 16s linear infinite, move-meteor2-sm 16s linear infinite;
}

.meteor3-sm{
  animation:small-meteor 16s linear infinite, move-meteor3-sm 16s linear infinite;
}

.meteor4-sm{
  animation:small-meteor 16s linear infinite, move-meteor4-sm 16s linear infinite;
}

.meteor5-sm{
  animation:small-meteor 16s linear infinite, move-meteor5-sm 16s linear infinite;
}

/*
** Big meteors
*/

.meteor1-bg, .meteor2-bg, .meteor3-bg, .meteor4-bg{
  z-index:6;
}
.meteor1-bg{
  animation:big-meteor 8s linear infinite, move-meteor1-bg 8s linear infinite;
}

.meteor2-bg{
  animation:big-meteor 8s linear infinite, move-meteor2-bg 8s linear infinite;
}

.meteor3-bg{
  animation:big-meteor 8s linear infinite, move-meteor3-bg 8s linear infinite;
}

.meteor4-bg{
  animation:big-meteor 8s linear infinite, move-meteor4-bg 8s linear infinite; 
}

/*
** Medium meteors
*/
.meteor1-md, .meteor2-md{
  z-index:4;
}

.meteor1-md{
  animation:medium-meteor 12s linear infinite, move-meteor1-md 12s linear infinite; 
}

.meteor2-md{
  animation:medium-meteor 12s linear infinite, move-meteor2-md 12s linear infinite; 
}

/*
** Stars
*/

#stars {
  background:#000 url('http://www.script-tutorials.com/demos/360/images/stars.png') repeat top center;
  z-index:0;
}


/*
** Twinkling stars
*/
#twinkling{
  background:transparent url('http://www.script-tutorials.com/demos/360/images/twinkling.png') repeat top center;
  z-index:1;
  
  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 150s linear infinite;
  animation:move-twink-back 150s linear infinite;
}

/*
** Black clouds
*/
#clouds-black{
    background:transparent url('http://www.script-tutorials.com/demos/360/images/clouds2.png') repeat-x left top;
  z-index:2;
   opacity:0.7;
  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 280s linear infinite;
}

/*
** Red clouds
*/

#clouds-red {
  z-index:3;
}

/*
** Movement of red clouds
*/
#clouds-red, #clouds-red2, #clouds-red3 {
  background: transparent url('http://www.script-tutorials.com/demos/360/images/clouds3.png') repeat-x left center;
  
  -moz-animation:move-clouds-back-red 200s linear infinite;
  -ms-animation:move-clouds-back-red 200s linear infinite;
  -o-animation:move-clouds-back-red 200s linear infinite;
  -webkit-animation:move-clouds-back-red 200s linear infinite;
  animation:move-clouds-back-red 200s linear infinite;
}
#clouds-red2{
  z-index:4;
}
#clouds-red3{
  z-index:5;
}

body, html {
  height: 100%;
}

#word{
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
}

 
#word > div{
  max-width:100%;
  font-size:50px;
  z-index:10;
  background: orange;
  color: #FFDD1B;
  font-family: Pacifico;
}

#word > div:hover{
  color:#FFF;
  animation: neon 1s ease-in-out infinite alternate;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
    <div id="word">
  <div>Galaxy</div>
</div>
<div id="container-sun">
  <div class="container-ray">
    <div class="ray ray-bg ray1"></div>
    <div class="ray ray-sm ray2"></div>
    <div class="ray ray-bg ray3"></div>
    <div class="ray ray-sm ray4"></div>
  </div>
</div>
<div id="stars"></div>
<div id="twinkling"></div>
<div id="clouds-red"></div>
<div id="clouds-red2"></div>
<div class="meteor meteor1-sm"></div>
<div class="meteor meteor2-sm"></div>
<div class="meteor meteor3-sm"></div>
<div class="meteor meteor4-sm"></div>
<div class="meteor meteor1-md"></div>
<div class="meteor meteor2-md"></div>
<div class="meteor meteor1-bg"></div>
<div class="meteor meteor2-bg"></div>
<div class="meteor meteor3-bg"></div>
<div class="meteor meteor4-bg"></div>
<div id="clouds-red3"></div>
<div id="clouds-black"></div>

    • 1

  3. La forma màs sencilla y nativa es usar display table al 100% con display table cell y al cell agregar vertical align middle con text align center.

    • 1

  4. 您可以通过使用 、 和 属性并将它们保留为 0 来执行此操作top，这与该属性相结合，bottom将使div 在屏幕中心居中。leftrightmargin: auto

    请记住，您必须设置固定的宽度和高度，否则 div 将尽可能扩大，即它将占据整个屏幕。

    #word > div{
  max-height: 60px; /* NUEVO */
  max-width: 180px; /* NUEVO */
  display: inline-block;
  font-size:50px;
  z-index:10;
  background: orange;
  position:absolute;
  color: #FFDD1B;
  font-family: Pacifico;
  top: 0; /* NUEVO */
  left: 0; /* NUEVO */
  right: 0; /* NUEVO */
  bottom: 0; /* NUEVO */
  margin: auto; /* NUEVO */
}

    您修改后的示例：

    * {
  padding:0;
  margin:0;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-5000px 5000px;}
}
@keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes move-clouds-back-red {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

@keyframes small-meteor {
  0%   {background-size:15px;}
  25%  {background-size:20px;}
  50%  {background-size:25px;}
  75%  {background-size:20px;}
  100% {background-size:15px;}
}

@keyframes move-meteor1-sm {
  from {background-position:500px -500px;}
  to   {background-position:80px 900px;}
}
@keyframes move-meteor2-sm{
  from {background-position:800px -80px;}
  to   {background-position:380px 900px;}
}
@keyframes move-meteor3-sm{
  from {background-position:100px -300px;}
  to   {background-position:-180px 900px;}
}
@keyframes move-meteor4-sm{
  from {background-position:2500px 100px;}
  to   {background-position:1200px 900px;}
}
@keyframes move-meteor5-sm{
  from {background-position:1200px 100px;}
  to   {background-position:800px 900px;}
}

@keyframes big-meteor {
  0%   {background-size:35px;}
  25%  {background-size:45px;}
  50%  {background-size:55px;}
  75%  {background-size:45px;}
  100% {background-size:35px;}
}
@keyframes move-meteor1-bg{
  from {background-position:680px -150px;}
  to   {background-position:100px 900px;}
}
@keyframes move-meteor2-bg{
  from {background-position:1500px -10px;}
  to   {background-position:850px 900px;}
}
@keyframes move-meteor3-bg{
  from {background-position:1000px -500px;}
  to   {background-position:450px 900px;}
}
@keyframes move-meteor4-bg{
  from {background-position:250px -850px;}
  to   {background-position:-550px 900px;}
}

@keyframes medium-meteor{
  0%   {background-size:25px;}
  25%  {background-size:30px;}
  50%  {background-size:35px;}
  75%  {background-size:30px;}
  100% {background-size:25px;}
}

@keyframes move-meteor1-md{
  from {background-position:380px -10px;}
  to   {background-position:-450px 1900px;}
}
@keyframes move-meteor2-md{
  from {background-position:950px -10px;}
  to   {background-position:450px 1900px;}
}
 
@keyframes brightness-sun{
  20%  {box-shadow: 0px 0px 40px 3px #FF7A20;
  background-color: #ff6700;}
  40%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  60%  {box-shadow: 0px 0px 40px 7px #FF7A20;
  background-color: #ff6700;}
  80%  {box-shadow: 0px 0px 40px 5px #FF6320;
  background-color: #ff4d00;}
  100% {box-shadow: 0px 0px 40px 0px #FF9120;
  background-color: #ff8100;}
}

/*@keyframes ray_anim { 
		0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}*/

#stars, #twinkling, #clouds-red, #clouds-red2, #clouds-red3, #clouds-black, .meteor,
#container-sun
{
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  position:absolute;
}

/*
** Sun
*/
#container-sun{
  top:-65px;
  left:-75px;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:50%;
  background-color: #ff8100;
  opacity:0.75;
  box-shadow: 0px 0px 40px 0px #FF9120; 
  animation: brightness-sun 10s linear infinite;
}

#container-sun > .container-ray {
  position:absolute;
  margin:auto;
  top:0px;
  left:0;
  right:0;
  bottom:0;
  width:70px;
  animation: ray_anim 120s linear infinite;
}

#container-sun > .container-ray > .ray {
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
		background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    margin-left:10px;
    border-radius:80% 80% 0 0;
    position:absolute;
  
  z-index:2;
    opacity:0.2;
}

.ray-bg{
  height:170px;
  width:20px;
}
@keyframes size-ray-sm{ 
	0%   {height:100px;}
  10%  {height:95px;}
  20%  {height:90px;}
  30%  {height:85px;}
  40%  {height:80px;}
  50%  {height:75px;}
  60%  {height:80px;}
  70%  {height:85px;}
  80%  {height:90px;}
  90%  {height:95px;}
  100% {height:100px;}
}
.ray-sm{
  height: 100px;
  width: 10px;
}

/*Big ray*/
.ray1 {    
    transform: rotate(360deg);
    top:165px;
    left: 15px;
}

.ray-sm.ray2{
  animation: size-ray-sm 3s linear infinite, move-ray2 3s linear infinite;
}
@keyframes move-ray2{
  0% {transform: rotate(-30deg);top: 150px;left: 85px;}
  10% {left:84px;}
  20% {left:83px;}
  30% {left:82px;}
  40% {left:81px;}
  50% {transform: rotate(-31deg);left:80px;}
  60% {left:81px;}
  70% {left:82px;}
  80% {left:83px;}
  90% {left:84px;}
  100% {transform: rotate(-30deg);top: 150px;left: 85px;}
}

.ray-sm.ray4{
  animation: size-ray-sm 3s linear infinite, move-ray4 3s linear infinite;
} 
@keyframes move-ray4{
  0% {transform: rotate(-78deg);top: 45px;left: 150px;}
  10% {left:149px;}
  20% {top:46px;left:148px;}
  30% {left:147px;}
  40% {left:146px;}
  50% { transform: rotate(-79deg);left:145px;}
  60% {left:146px;}
  70% {left:147px;}
  80% {top:46px;left:148px;}
  90% {left:149px;}
  100% {transform: rotate(-78deg);top: 45px;left: 150px;}
}
/*Small ray*/
.ray2 {    
    transform: rotate(-30deg);
    top: 150px;
    left: 85px;
}

/*Big ray*/
.ray3 {
  transform: rotate(-50deg);
  top: 95px;
  left: 150px; 
}

/*Small ray*/
.ray4 {
  transform: rotate(-78deg);
  top: 45px;
  left: 150px;   
}

.meteor{
  /*background: transparent url('https://image.flaticon.com/icons/svg/139/139699.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/180/180707.svg') no-repeat top center;*/
  /*background: transparent url('https://image.flaticon.com/icons/svg/728/728096.svg') no-repeat top center;*/
  background: transparent url('http://i.imgur.com/KgvLW3q.png') no-repeat top center;
  /*background: transparent url('https://i.imgur.com/hwRmI29.png') no-repeat top center;*/
  
  background-size:25px;
}

/*
** Small meteors
*/

.meteor1-sm, .meteor2-sm, .meteor3-sm, .meteor4-sm, .meteor5-sm{
  z-index:2;
}

.meteor1-sm{
  animation:small-meteor 16s linear infinite, move-meteor1-sm 16s linear infinite;
}

.meteor2-sm{
  animation:small-meteor 16s linear infinite, move-meteor2-sm 16s linear infinite;
}

.meteor3-sm{
  animation:small-meteor 16s linear infinite, move-meteor3-sm 16s linear infinite;
}

.meteor4-sm{
  animation:small-meteor 16s linear infinite, move-meteor4-sm 16s linear infinite;
}

.meteor5-sm{
  animation:small-meteor 16s linear infinite, move-meteor5-sm 16s linear infinite;
}

/*
** Big meteors
*/

.meteor1-bg, .meteor2-bg, .meteor3-bg, .meteor4-bg{
  z-index:6;
}
.meteor1-bg{
  animation:big-meteor 8s linear infinite, move-meteor1-bg 8s linear infinite;
}

.meteor2-bg{
  animation:big-meteor 8s linear infinite, move-meteor2-bg 8s linear infinite;
}

.meteor3-bg{
  animation:big-meteor 8s linear infinite, move-meteor3-bg 8s linear infinite;
}

.meteor4-bg{
  animation:big-meteor 8s linear infinite, move-meteor4-bg 8s linear infinite; 
}

/*
** Medium meteors
*/
.meteor1-md, .meteor2-md{
  z-index:4;
}

.meteor1-md{
  animation:medium-meteor 12s linear infinite, move-meteor1-md 12s linear infinite; 
}

.meteor2-md{
  animation:medium-meteor 12s linear infinite, move-meteor2-md 12s linear infinite; 
}

/*
** Stars
*/

#stars {
  background:#000 url('http://www.script-tutorials.com/demos/360/images/stars.png') repeat top center;
  z-index:0;
}


/*
** Twinkling stars
*/
#twinkling{
  background:transparent url('http://www.script-tutorials.com/demos/360/images/twinkling.png') repeat top center;
  z-index:1;
  
  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 150s linear infinite;
  animation:move-twink-back 150s linear infinite;
}

/*
** Black clouds
*/
#clouds-black{
    background:transparent url('http://www.script-tutorials.com/demos/360/images/clouds2.png') repeat-x left top;
  z-index:2;
   opacity:0.7;
  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 280s linear infinite;
}

/*
** Red clouds
*/

#clouds-red {
  z-index:3;
}

/*
** Movement of red clouds
*/
#clouds-red, #clouds-red2, #clouds-red3 {
  background: transparent url('http://www.script-tutorials.com/demos/360/images/clouds3.png') repeat-x left center;
  
  -moz-animation:move-clouds-back-red 200s linear infinite;
  -ms-animation:move-clouds-back-red 200s linear infinite;
  -o-animation:move-clouds-back-red 200s linear infinite;
  -webkit-animation:move-clouds-back-red 200s linear infinite;
  animation:move-clouds-back-red 200s linear infinite;
}
#clouds-red2{
  z-index:4;
}
#clouds-red3{
  z-index:5;
}

#word{
  width:100%;
  height:100%;
  text-align:center;
}

#word:before{
  content: "";
  display:inline-block;
  vertical-align:middle;
  height:100%;
}
 
#word > div{
  max-height: 60px;
  max-width: 180px;
  display: inline-block;
  font-size:50px;
  z-index:10;
  background: orange;
  position:absolute;
  color: #FFDD1B;
  font-family: Pacifico;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#word > div:hover{
  color:#FFF;
  animation: neon 1s ease-in-out infinite alternate;
}

@keyframes neon {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}
    <div id="word">
  <div>Galaxy</div>
</div>
<div id="container-sun">
  <div class="container-ray">
    <div class="ray ray-bg ray1"></div>
    <div class="ray ray-sm ray2"></div>
    <div class="ray ray-bg ray3"></div>
    <div class="ray ray-sm ray4"></div>
  </div>
</div>
<div id="stars"></div>
<div id="twinkling"></div>
<div id="clouds-red"></div>
<div id="clouds-red2"></div>
<div class="meteor meteor1-sm"></div>
<div class="meteor meteor2-sm"></div>
<div class="meteor meteor3-sm"></div>
<div class="meteor meteor4-sm"></div>
<div class="meteor meteor1-md"></div>
<div class="meteor meteor2-md"></div>
<div class="meteor meteor1-bg"></div>
<div class="meteor meteor2-bg"></div>
<div class="meteor meteor3-bg"></div>
<div class="meteor meteor4-bg"></div>
<div id="clouds-red3"></div>
<div id="clouds-black"></div>

    • 0