javascript - 保持 div 以视口(viewport)为中心

Question

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

问题是表单开始与容器的右边缘对齐。请参阅下面的屏幕截图。如您所见，我需要一个平滑的表单过渡，以便在调整视口(viewport)大小时它会沿着 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

Edward 你好。
当您调整窗口大小时，听起来您刚刚过渡到这里工作。并且不将表单 div 居中。因为在你的 fiddle 中，你似乎可以按照你想要的方式工作。

所以要在调整大小时获得过渡...您需要从一种尺寸过渡到另一种不同尺寸。
为此，让我们使用 col-xx-xx 类让过渡从一个过渡到另一个。

我在 css 中添加了一个 class 的 transition-with。

查看代码，了解容器 > 行 > div 的使用方式，以及现在您的 slider id 所在的位置。

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

(注意)...我在 transition: all 2s ease-out; 中使用 all 而不是使用 width，因为 < strong>all 将为两侧的 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-->