我怎样才能水平居中这个动画？答案

【问题标题】：How can i horizontally center this animation?我怎样才能水平居中这个动画？
【发布时间】：2014-06-01 05:19:51
【问题描述】：

我在链接悬停时为 CSS 动画叠加了 3 张图像。我正在使用 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); 
}

【问题讨论】：

看起来这就是你想要的codepen.io/anon/pen/AhHLx。您应该为#avatar div添加position:relative，然后只需对齐#avatar div，因为它只是一个普通的div，您可以使用margin:0 auto将它居中，当然它的高度应该小于页面的宽度以便它可以居中。
请在问题正文中发布您的代码。如果 CodePen 失败，这个问题将毫无意义。
好的，我刚刚添加了代码，会为进一步的问题做。

标签： css animation alignment

【解决方案1】：

将此添加到您的 CSS：

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

【讨论】：

【解决方案2】：

您可以使用以下技巧使图像居中：

left: 50%;
margin-left:14px;

但是像 King-King 建议的那样改变父对象的位置会更好。

#avatar {
  margin:0 auto;
  width:174px;
  position:relative;
}

根据http://www.w3schools.com/css/css_positioning.asp

绝对位置元素相对于第一个元素定位位置不是静态的父元素。

【讨论】：