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

Question

所以我有一个 div，假设 width: 7vh;高度:7vh； background: black; 它位于另一个 div 中，background: orange;高度:7vh；宽度: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);}
}