将div保持为视口中心

Question

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

问题是表单开始与容器的右边缘对齐。请参见下面的截图。正如您所看到的，我需要一个平滑的表单转换，以便在调整视口大小时沿y移动。

如何使用javascript或css完成此解决方案？

https://jsfiddle.net/ns5xxnxs/6/

<div id = "slider">
    <div class = "container">
        <div id = "form" class="col-sm-3 col-sm-offset-8 col-md-3">
        </div>

       </div>
    </div>

Answer 1

爱德华你好 当你调整窗口大小时，听起来就像你刚刚过渡到这里工作一样。而不是以表格div为中心。因为在你的小提琴中你似乎有你的工作方式。

所以要在调整大小时获得转换... 您需要将转换从一种尺寸转换为另一种尺寸 为此，可以使用col-xx-xx类将转换从一个转换为另一个。

我在css中添加了转换的class 。

查看代码以及容器＆gt;的方式行＆gt;使用div，现在使用滑块 id。

这是工作 Fiddle ，只需移动左侧的内框即可调整大小。

（注）...我在transition: all 2s ease-out;中使用所有而非使用width，因为所有会在两者上设置div的动画两侧。如果我刚使用width，它只会从一侧扩展。试着看看我的意思。

希望这能让你开始。
CSS

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

HTML

<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-->  

Answer 2

试试这个 - https://jsfiddle.net/ns5xxnxs/8/

Bootstrap css迫使它走向正确。 我在下面改变了认为确保它在主容器中流动。变化如下。希望这会有所帮助。

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

}