将div保持为视口中心

Question

I have a form within a container, when the user resizes the window I need to the form to move into the center of the container, and when he goes full screen it should return to the original position.

The problem is the form starts aligned to the right edge of the container. See the screenshot below. As you can see I need a smooth form transition so that it moves along the y when the viewport is resized.

How can i accomplish this solution with either javascript or 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 Hi there.
It sound like you are just after a transition to work here when you resize the window. And not centering the form div. because in your fiddle you seem to have that working for how you want it.

So to get the transition when resized... You need to have the transition go from one size to another different size.
To do this lets use the col-xx-xx classes to have the transition go from one to the other.

I added in the css a class of transition-with .

Have a look at the code and for how the container > row > div are used and now where your slider id is.

Here is the working Fiddle , just move the inner frame on the left to resize.

(Note)... I use all in the transition: all 2s ease-out; rather than using width , because all will animate the div on both sides. If I just used width it will only expand from one side. Try both to see what I mean here.

Hope this gets you started.
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

Try this out - https://jsfiddle.net/ns5xxnxs/8/

Bootstrap css was forcing it towards right. I have changed below thinks to make sure it flows in main container. Changes are below. Hope this helps.

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

}