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

Question

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

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

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

Answer 1

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

演示

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);}
}