Rotacionar e centralizar icon

by Lucas Silva

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="body-builder">
  <div class="container">
  <div class="element-middle">
    <i class="fa fa-apple" aria-hidden="true"></i>
  </div>
</div>
</div>

CSS

.body-builder{
  background:#7986CB;
  width:100%;
  height:500px;
}
.container{
  width:100%;
  height:375px;
  //background:#7986CB;
  background: rgba(68,68,68, 0.5);
}

.element-middle{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background: #BBDEFB;
    text-align:center;
}

.fa-apple{
animation: fa-apple-animation 2s infinite linear;
font-size: 5em;
margin-top:10px;
}

@-webkit-keyframes fa-apple-animation {
    from {background-color: red; transform: rotate(0deg);}
    to {background-color: yellow; transform: rotate(359deg);}
}

/* Standard syntax */
@keyframes fa-apple-animation {
    from {background-color: red; transform: rotate(0deg);}
    to {background-color: yellow; transform: rotate(359deg);}
}