Vertically centering Font Awesome icons with transition

Question

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 1

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>