如何使用Bootstrap垂直和水平居中塊？

Question

我有這樣的形式：

<div class="container-fluid"> 
<div class="span5 well"> 
<h2>Authentification</h2> 
<form method="POST">...</form> 
</div> 
</div> 

我怎麼能中心是塊（DIV span5井）垂直和水平？謝謝。

Answer 1

水平居中可以通過將margin: 0 auto添加到沒有兄弟的元素來完成。

Answer 2

<style> 
.well 
{  
    position:absolute;  
    width:200px;  
    height:200px; 
    top: 50%; 
    left: 50%; 
    margin-top:-100px; /* negative number 1/2 height */ 
    margin-left:-100px; /* negative number 1/2 width */ 
    outline:1px solid #CCC; 
} 
</style> 

<div class="container-fluid"> 
<div class="span5 well"> 
<h2>Authentification</h2> 
<form method="POST">...</form> 
</div> 
</div> 

Answer 3

沒有什麼與Bootstrap相沖突來使用一些JS，比如this guy's JQuery.vAlign plugin。我發現比垂直對齊技巧更直接。

Answer 4

前面提到了水平對中以設置邊距0自動。要動態垂直對齊元素（當你不知道高度時），你可以相對地將它移動50％（向上或向下），然後使用transform：translateY（50％）（+/-）將它居中

div.span5 { 
    margin: 0 auto; 
    top:50%; 
    width:400px; 
    position:relative; 
    transform: translateY(-50%); 
} 

fiddle