How can i horizontally center this animation? - css

Question

I've got 3 images superposed for a css animation on a link hover. I'm using position:absolute for overlaying the 2 animated images. But then i don't know how i could center the animation on the page.
Here is the 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

Add this to your CSS:
#avatar {
text-align:center;
position:relative;
width:147px;
margin:0 auto;
}

Answer 2

You can use the following trick to center images:
left: 50%;
margin-left:14px;
But changing the position of the parent object like King-King suggested is better.
#avatar {
margin:0 auto;
width:174px;
position:relative;
}
According to http://www.w3schools.com/css/css_positioning.asp
An absolute position element is positioned relative to the first
parent element that has a position other than static.