保持div居中對視口

我有一個容器內的窗體，當用戶調整窗口的大小時，我需要窗體移動到容器的中心，當他全屏時，它應該返回到原來的位置。保持div居中對視口

問題是窗體開始對齊容器的右邊緣。請參閱下面的截圖。正如你所看到的，我需要一個平滑的形式轉換，以便在視口大小調整時沿y軸移動。

我該如何使用javascript或css來完成此解決方案？

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

     </div> 
    </div>

來源

2015-09-26 Edward

不明白你想要什麼？你想要平穩過渡還是其他什麼？ – divy3993

我想在窗口大小調整的時候，讓紅框中的窗體沿着容器移動，這樣它就永遠不會脫離屏幕 – Edward

Edward你好。
聽起來就像你剛剛在調整窗口大小時在這裏工作過渡一樣。而不是集中表單div。因爲在你的小提琴中，你似乎在爲你想要的方式工作。

因此，要調整大小時進行轉換... 您需要從一種尺寸轉換到另一種尺寸。
要做到這一點，可以使用col-xx-xx類從一個轉換到另一個。

我在css中添加了一個class的轉換與。

看看代碼以及如何使用容器> row> div，現在您的滑塊id是。

這裏是工作Fiddle，只是移動左邊的內框來調整大小。

（注）......我用在transition: all 2s ease-out;所有，而不是使用width，因爲所有將動畫雙方的股利。如果我只用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-->

來源

2015-09-26 23:15:32 AngularJR

偉大的解決方案，很好的答案 – Edward

嘗試了這一點 - https://jsfiddle.net/ns5xxnxs/8/

引導CSS是迫使其向右。我改變了下面的想法，以確保它在主容器中流動。更改如下。希望這可以幫助。

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

}

來源

2015-09-26 20:41:05 Ranjana

很酷的解決方案，但窗體不是100％寬度，它是容器的一小部分，也許是30％或450像素並坐在對齊的右邊 – Edward

如果你希望#form設置30％，並將其對齊，那麼這可能會有所幫助 - margin-left：35％！important; width：30％！important; – Ranjana

保持div居中對視口

回答

相關問題