키 프레임 애니메이션을 중앙에 배치하는 방법은 무엇입니까?

Question

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 코드입니다 :
여기 내 CSS 코드

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

Answer 1

요셉의 솔루션에서와 같이 고정 된 픽셀 값으로 여백의 왼쪽 속성을 사용하여 요소를 정렬하고 상쇄함으로써 당신 모든 결의안에 중점을 두지는 않을 것입니다.

모든 해상도에서 중심적인 효과를 얻으려면 왼쪽에서 50 % 오프셋을 적용한 다음 transform : translate3d (-50 %, 0,0)를 설정하십시오. 이렇게하면 요소가 화면 크기에 관계없이 항상 X 축의 가운데에 배치됩니다.

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