Center vertically and horizontally a div

Question

Center vertically and horizontally a div

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (0 votes)

3

I am learning to use CSS3 keyframes and animation.

I am creating a Galaxy and I want to put a text but I can not focus vertically, I have tried everything but I have not achieved it. 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>

css3 css

asked by Hoose 28.02.2018 в 19:55

source

4 answers

2

There are several ways to center a div one of them is putting the following style. What the style does is calculate the distance that must be from the top and left with your div (in this case 50% of the div divider) and they are only applicable when you have the attribute position in the absolute or fixed value up to that point the upper left corner of your div would be the center of the container div. To center the internal div, the transform plus translate is used, which centers it at that exact point in the center, both vertical and horizontal.

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

}

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

answered by 28.02.2018 в 20:22

1

The simplest and most native way is to use display table to 100% with display table cell and to cell add vertical align middle with text align center .

answered by 05.03.2018 в 05:50

0

You can do it using the properties top , bottom , left and right and leaving them at 0, which, combined with the property margin: auto will 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 you can, that is, the whole screen will occupy you.

#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>

answered by 28.02.2018 в 20:07

Problem with Python, I get this error: 'NoneType' and 'NoneType' Last record of fields that have the same date MYSQL

score 0 · Accepted Answer

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

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

Although you have to add the typical code:

body, html {
  height: 100%;
}

I could not quickly verify 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>