Javascript 将div保持在视口的中心

我在容器中有一个窗体，当用户调整窗口大小时，我需要将窗体移动到容器的中心，当用户全屏显示时，窗体应返回到原始位置

问题是表单开始与容器的右边缘对齐。请参见下面的屏幕截图。如您所见，我需要平滑的形状过渡，以便在调整视口大小时沿y方向移动

如何使用javascript或css实现此解决方案

试试这个-

引导css迫使它向右移动。 我已经改变了下面的想法，以确保它在主容器中流动。变化如下。希望这有帮助

#form
{
    height:250px;
    background-color:red;
    margin-left:0px!important;
    width:100%!important;

}

---

爱德华你好。
当您调整窗口大小时，听起来好像您刚刚过渡到此处工作。而不是将表单div居中。因为在你的小提琴中，你似乎有你想要的工作方式

因此，要在调整大小时获得转换。。。 您需要从一种尺寸转换到另一种不同的尺寸。
为此，让我们使用col xx类从一个类转换到另一个类

我在css中添加了一个

类

的转换

查看代码，了解容器>行>div是如何使用的，以及现在您的滑块

id

在哪里

这是正在工作的，只需移动左侧的内部框架即可调整大小

（注）。。。我在

转换中使用all：所有2个释放

而不是使用

width

，因为all将在两侧设置div动画。如果我只使用宽度，它只会从一侧展开。试着两者都明白我的意思

希望这能让你开始。
CSS

#form{
    height:250px;
    background-color:red;
}
#slider{
    background-color:grey;
}        
.transition-width { 
    transition: all 2s ease-out; 
    webkit-transition: all 2s ease-out; 
} 

<div class="container">
    <h3>Transition happens when window resized.</h3>
    <div class="row" id="slider">
        <div id="form" class="col-md-3 col-md-offset-8 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 transition-width">
        </div>
    </div>
</div> <!--end container-->  

HTML

#form{
    height:250px;
    background-color:red;
}
#slider{
    background-color:grey;
}        
.transition-width { 
    transition: all 2s ease-out; 
    webkit-transition: all 2s ease-out; 
} 

<div class="container">
    <h3>Transition happens when window resized.</h3>
    <div class="row" id="slider">
        <div id="form" class="col-md-3 col-md-offset-8 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 transition-width">
        </div>
    </div>
</div> <!--end container-->  

调整窗口大小时发生转换。

---

冷却溶液，但形状不是100%宽度，它是容器的一部分，可能是30%或450 px，并与右侧边缘对齐如果您需要，形状将设置为30%，并将其对齐在中心，则这可能会有帮助-左边距：35%！重要的；宽度：30%！重要的；不明白你想要什么？你想要轻松平滑的过渡还是其他什么？我想在调整窗口大小时，红色框中的表单沿着容器移动，这样它就永远不会离开屏幕。很好的解决方案，很好的答案