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

Vertically and horizontally center a div

  • 772

I'm learning to use CSS3 keyframes and animation.

I am creating a Galaxy and I want to put a text but I cannot center it vertically, I have tried everything but I have not succeeded. How can I do it?

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

    An option with flexbox, using its famous properties to center on both axes:

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

    Although you have to add the typical code:

    body, html {
  height: 100%;
}

    I couldn't quickly check if this affects some animations.

    * {
  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. You can do this by using the top, bottom, leftand properties rightand leaving them at 0, which, combined with the property, margin: autowill center the div in the center of the screen.

    Keep in mind that you will have to set a fixed width and height, otherwise the div will expand as much as it can, that is, it will occupy the entire screen.

    #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 */
}

    Your modified example:

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