如何使用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，比如這個人的JQuery.vAlign插件 。 我發現它比垂直對齊技巧更直接。

Answer 4

前面已提到水平居中設置邊距0自動。

要動態地垂直對齊元素（當您不知道高度時），可以相對移動50％（向上或向下），然后使用transform：translateY（50％）（+/-）將其置於其父容器中心：

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

小提琴