css - 我怎样才能水平居中这个动画？

Question

我有 3 张图像叠加在链接悬停上的 css 动画。我正在使用 position:absolute 来叠加 2 个动画图像。但是后来我不知道如何将动画放在页面的中心。

这是CodePen http://codepen.io/beng_beng/pen/IHAFD

<div id="avatar">
  <img src="http://placehold.it/174x174" alt="rotator">
    <a id="rotator" href="#"><img src="http://s28.postimg.org/gfrse4h7d/small.png" alt="rotator"><span><img src="http://s27.postimg.org/j6qdwtowf/small.png" alt="rotator"></span></a>
</div>


body {
  margin:0;
  padding:0;
}
#avatar img {
  position: relative;
  height: 174px;
  width: 174px;
  border-radius: 100%;
}
a#rotator img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out;  
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out;
}

a#rotator:hover img { 
-webkit-transform: rotate(-360deg); 
-moz-transform: rotate(-360deg); 
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg); 
}

a#rotator span img {
position: absolute;
width: 147px;
height: 147px;
top: 14px;
left: 14px;
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out;  
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out;
}

a#rotator:hover span img { 
-webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg); 
}

Answer 1

将此添加到您的 CSS:

#avatar {
  text-align:center;
  position:relative;
  width:147px;
  margin:0 auto;
}