在css中将带有动画和vh单位的div居中？

Question

所以我有一个 div，假设是 width: 7vh; height: 7vh; background: black;，它在另一个 div 中，background: orange; height: 7vh; width: 100%;。我有一个动画，应该取消它的中心。目前我在内部 div 上使用left: 50%，但显然这接近居中，但不是真的。 margin: 0 auto; 或 margin-left: auto; margin-right: auto; 不要动画。那我该怎么办？用JS计算距离是我唯一的办法吗？

JsFiddle http://jsfiddle.net/8e7dk/

这个例子没有居中，它只是接近这样做，通过使用left: 50%;

Answer 1

您可以在动画开始时使用margin-left:-3.5vh; 将正方形居中，并在关键帧动画中将其设置为 0：

DEMO

CSS：

#outer{
    background: orange;
    height: 7vh;
    width: 100%;
}
#logo{
    height: 7vh;
    position: absolute;
    left: 50%;
    margin-left:-3.5vh;
    width: 7vh;
    -webkit-animation: moveLeft 1s forwards ease-in-out;
    -moz-animation: moveLeft 1s forwards ease-in-out;
    -ms-animation: moveLeft 1s forwards ease-in-out;
    -o-animation: moveLeft 1s forwards ease-in-out;
    animation: moveLeft 1s forwards ease-in-out;
    background: black;
}

@-webkit-keyframes moveLeft {
    from {left: 50%;margin-left:-3.5vh;}
    to {left: 0;margin-left:0; -webkit-transform: rotate(360deg);}
}
@-o-keyframes moveLeft {
    from {left: 50%;margin-left:-3.5vh;}
    to {left: 0;margin-left:0; -webkit-transform: rotate(360deg);}
}
@-moz-keyframes moveLeft {
    from {left: 50%;margin-left:-3.5vh;}
    to {left: 0;margin-left:0; -webkit-transform: rotate(360deg);}
}
@keyframes moveLeft {
    from {left: 50%;margin-left:-3.5vh;}
    to {left: 0;margin-left:0; -webkit-transform: rotate(360deg);}
}