Javascript jquery使用中心响应设置动画

我正在尝试使用jquery with.css将一个框设置为屏幕宽度中心的动画，它将响应浏览器大小的调整，但如果不刷新浏览器，我似乎无法让它在中心位置正确响应。代码如下：

<div class="box"></div>

.box {
    position: absolute;
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

$(function(){
    $(".box").css({left: $(window).width() / 2 - $(".box").width() / 2})
    .animate({left: '-=0%', top: '100px'},700);
});

---

我尝试使用.css{left:'50%}来响应浏览器大小，但现在该框没有居中。

您可以使用以下css示例居中：

代码段：

#box{
      ...
      margin-left: auto ;
      margin-right: auto ;
    }

当你使用盒子的时候。我相信你想要一个模态窗口之类的东西。因此，您可以使用jquery UI来实现：

---

如果您仍然需要使用jQuery的样式，您可以再次尝试使用left.css{left:'50%}然后在box.css{marginLeft:$'.box.width/2*-1}

动画代码概要

$(".box").css({left: $(window).width() / 2 - $(".box").width() / 2})
.animate({left: '50%', marginLeft:  ($(".box").width()/2)*-1, top: '100px'},700);

---

根据我在评论中提到的对您问题的理解，这是一个您可以使用的解决方案

$(function(){
  $(".box").css({left:'50%',transform:'translateX(-50%)'}).animate({top:'100px'},700);
});

---

参考资料：。

我正试图理解你想做什么，请耐心听我说。因此，首先要将长方体水平居中，然后仅在没有水平运动的情况下垂直设置长方体动画？然后，调整大小事件不应设置长方体的动画，使长方体在水平方向上与当前浏览器调整大小的状态保持一致，但在垂直方向上与之前设置动画的位置没有任何动画？这是正确的吗？是的，这正是我想要做的。非常感谢。