css - キーフレームアニメーションを中央に配置するには?

Question

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>