Sean Sean - 24 days ago 15
CSS Question

Vertically centering Font Awesome icons with transition

I've got these animated divs with a round border with Font Awesome icons in them. What's the best way to vertically align them while keeping them in the middle throughout the transition?

Here's the animation on CodePen



body {
background-color: #3498db;
}

.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
text-align: center;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}


.social a:visited {
color: currentColor;
}

.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
transform-origin: 50% 50%;
}

#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}

#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}

@keyframes twitter {
0% {transform: translate(-178px, -160px);}
100% {transform: translate(-178px, -164px);}
}

#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}

@keyframes linkedin {
0% {transform: translate(168px, -77px);}
100% {transform: translate(168px, -84px);}
}

#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}

@keyframes github {
0% {transform: translate(-198px, 58px);}
100% {transform: translate(-198px, 54px);}
}

#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}

@keyframes phone {
0% {transform: translate(0px, -220px);}
100% {transform: translate(0px, -216px);}
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<div id='bubbles'>
<a href="https://www.facebook.com/" target="_blank"><div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div></a>
<a href="https://twitter.com/" target="_blank"><div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div></a>
<a href="https://www.linkedin.com/" target="_blank"><div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div></a>
<a href="https://www.github.com/" target="_blank"><div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div></a>
<a href="https://www.facebook.com/" target="_blank"><div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div></a>
</div>




Answer

Just with simply adding this to your CSS

CSS

.social span{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

body {
  background-color: #3498db;
}
.social {
  position: absolute;
  font-size: 36px;
  color: white;
  width: 50px;
  height: 50px;
  border: 4px solid white;
  border-radius: 50%;
  padding: 3px;
  transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: 50% 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.social a:visited {
  color: currentColor;
}
.social:hover {
  background-color: white;
  color: #3498db;
  width: 80px;
  height: 80px;
  transform-origin: 50% 50%;
}
#facebook {
  animation-name: facebook;
  animation-duration: 1000ms;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes facebook {
  0% {
    transform: translate(148px, 78px);
  }
  100% {
    transform: translate(148px, 84px);
  }
}
#twitter {
  animation-name: twitter;
  animation-duration: 950ms;
  animation-timing-function: ease-in-out;
  ;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  ;
  animation-direction: alternate;
}
@keyframes twitter {
  0% {
    transform: translate(-178px, -160px);
  }
  100% {
    transform: translate(-178px, -164px);
  }
}
#linkedin {
  animation-name: linkedin;
  animation-duration: 900ms;
  animation-timing-function: ease-in-out;
  ;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  ;
  animation-direction: alternate;
}
@keyframes linkedin {
  0% {
    transform: translate(168px, -77px);
  }
  100% {
    transform: translate(168px, -84px);
  }
}
#github {
  animation-name: github;
  animation-duration: 950ms;
  animation-timing-function: ease-in-out;
  ;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  ;
  animation-direction: alternate;
}
@keyframes github {
  0% {
    transform: translate(-198px, 58px);
  }
  100% {
    transform: translate(-198px, 54px);
  }
}
#phone {
  animation-name: phone;
  animation-duration: 900ms;
  animation-timing-function: ease-in-out;
  ;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  ;
  animation-direction: alternate;
}
@keyframes phone {
  0% {
    transform: translate(0px, -220px);
  }
  100% {
    transform: translate(0px, -216px);
  }
}
.social span {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id='bubbles'>
  <a href="https://www.facebook.com/" target="_blank">
    <div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div></a>
          <a href="https://twitter.com/" target="_blank"><div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div></a>
          <a href="https://www.linkedin.com/" target="_blank"><div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div></a>
          <a href="https://www.github.com/" target="_blank"><div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div></a>
          <a href="https://www.facebook.com/" target="_blank"><div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div></a>
        </div>

Comments