Css 如何设置关键帧动画的中心？

我有一个使用CSS的关键帧动画，我想（自动）使其在所有分辨率、浏览器等中居中。我尝试过使用margin:auto等，但这总是导致我的动画无法工作。也许我插错了，但我不知道。这是我目前拥有的，没有任何自动边距。
以下是我的CSS代码：

#image {
    text-align:center;
    width:276px;
    position:absolute; 
    left:50%; 
    margin-left: -130px; /*this is what works for me, I'd imagine it's not */
    margin-top: -240px;  /*centered for everyone */
    animation:dampe 0.3s infinite; 
    -webkit-animation:dampe 0.3s infinite; 
}
@keyframes image {
0% { top:45%; }
50% { top:50%; }
100% { top:45%; }
}
@-webkit-keyframes image {
0% { top:45%; }
50% { top:50%; }
100% { top:45%; }
}  

以下是我的HTML代码：

<div id="image">
    <img src="image.png" /> 
</div>

---

通过使用margin left属性对齐元素，并使用固定的px值进行偏移（如Joseph的解决方案中所示），无法在所有分辨率上实现居中效果

要在所有分辨率上实现居中效果，请将元素从左侧偏移50%，然后设置transform:translate3d（-50%，0,0）。这将确保您的元素始终位于X轴的中心，无论屏幕大小如何

/*CSS Markup*/
.centerX{
left:50%; 
-webkit-transform:translate3d(-50%,0,0);
}

这对我很有用：