Question

我有一个使用CSS的关键帧动画，我想（自动）让它以所有分辨率，浏览器等为中心。我已经尝试过保证金：自动等等。但这总是导致我的动画不能正常工作。也许我插错了，但我不知道。这是我目前所拥有的，没有任何汽车保证金这是我的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>

Answer 1

通过使用margin-left属性对齐元素并使用固定的px值进行偏移，就像在Joseph的解决方案中一样，您将无法在所有分辨率上实现居中效果。

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

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

如何使关键帧动画居中？

1 个答案: