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

Question

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

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

将 line-height: 80px; 添加到您的 .social class

.social:hover {
    height: 80px;
    line-height: 80px;
}

body {
    background-color: #3498db;
}
.social {
    position: absolute;
    font-size: 36px;
    color: white;
    width: 50px;
    height: 50px;
    line-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;
    line-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 2

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

Answer 3

您可以对外部容器使用 display:table，对内部元素使用 display:table-cell 和 vertical-align:middle

#facebook, #twitter, #linkedin, #github, #phone {
  display:table;
  margin:auto
}

.fa {
  display:table-cell;
  vertical-align:middle
}

无论高度如何，它都会使内部内容垂直居中，并且它也与旧版浏览器兼容 http://caniuse.com/#search=vertical-align

body {
  background-color: #3498db;
}
.fa {
display:table-cell !important;
vertical-align: middle;
}

.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;
display:table;
margin:auto;
}

@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;
  display:table;
  margin:auto;
}

@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;
  display:table;
  margin:auto;

}

@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;
  display:table;
  margin:auto;

}

@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;
  display:table;
  margin:auto;

}

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

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

Vertically centering Font Awesome icons with transition

css

transition

centering