Javascript 使用velocity.js将div设置为中心动画？

我有一个div列表，我想用velocity来设置第一项的动画。动作应该是使div变成一个圆，具有不同的颜色，并且保持居中

HTML的代码

<div id="container">
    <div class="paper"><h3>Box 1</h3></div>
    <div class="paper"><h3>Hello Word</h3></div>
    <div class="paper"><h3>2 + 2 = 5</h3></div>
    <div class="paper"><h3>Final box</h3></div>
</div>

js代码：

 window.onload = function(){
            var $box1 = $('.paper').eq(0);
            $box1.on("click",function(){
                $box1.velocity({borderRadius: '50%',
                                width:'100px',
                                backgroundColor:'#4CAF50',
                                color:'#fff',
                                marginLeft:'auto',
                                marginRight:'auto'
                                },
                               {duration:500,easing:'easeInQuad'});
            });

        }

---

基本上，除了单击的div总是在容器的左侧设置动画外，其他一切都正常工作。我认为将MarginLeft和MarginRight设置为auto可以防止出现这种情况，但显然不行（不过，将MarginLeft设置为40%是可行的）。我怎样才能解决这个问题

使用flexbox保持事物居中

在您的示例中，我刚刚将此属性添加到您的容器中

display:flex;
flex-direction: column;
align-items: center;

检查这把小提琴

var$box1=$（'.paper'）.eq（0）；
$box1.on（“单击”，函数（）{
$box1.速度（{边界半径：'50%'，
宽度：'100px'，
背景颜色：“#4CAF50”，
颜色：'#fff'
},
{持续时间：500，缓和期：'easeInQuad'}）；
});
正文{
背景色：#F5；
}
#容器{
宽度：80%；
左边距：自动；
右边距：自动；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.纸张{
宽度：100%；
高度：100px；
背景色：#fff；
边缘顶部：10px；
盒影：1px 3px 4px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
线高：100px；
文本对齐：居中；
}
.纸：悬停{
背景色：#607D8B；
颜色：白色；
}

方框1
你好词
2 + 2 = 5
最后一箱

display:flex;
flex-direction: column;
align-items: center;