How I can center a block vertically and horizontally with Bootstrap?

I have this form:

我有这样的形式:

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

How I can center that block (div span5 well) vertically and horizontally? Thank you.

我怎样才能将该块(div span5井)垂直和水平居中?谢谢。

4 个解决方案

#1

Horizontal centering can be done by adding margin: 0 auto to an element that has no siblings.

可以通过向没有兄弟节点的元素添加margin:0 auto来完成水平居中。

#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>

#3

There's nothing conflicting with Bootstrap to use some JS for this, such as this guy's JQuery.vAlign plugin. I find that more straight-forward than the vertical-align tricks.

与Bootstrap没有任何冲突,可以使用一些JS,比如这个人的JQuery.vAlign插件。我发现它比垂直对齐技巧更直接。

#4

Horizontal centering was mentioned earlier to set margin 0 auto.

之前提到的水平居中设置了0自动保证金。

To vertically align the element dynamically (when you don't know the height) you can relatively shift it 50% (up or down) and then use transform: translateY(50%) (+/-) to center it within its parent container:

要动态地垂直对齐元素(当您不知道高度时),可以将其相对移动50%(向上或向下),然后使用transform:translateY(50%)(+/-)将其置于其父容器中:

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

fiddle

#1