0

我有一个使用 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>
4

1 回答 1

0

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

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

/*CSS Markup*/
.centerX{
left:50%; 
-webkit-transform:translate3d(-50%,0,0);
}
于 2014-10-20T21:25:02.103 回答