css - 垂直居中带有过渡的 Font Awesome 图标

Question

我有这些带圆形边框的动画 div，其中包含 Font Awesome 图标。在整个过渡过程中将它们垂直对齐同时将它们保持在中间的最佳方式是什么？

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

只需将它添加到您的 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>