Как я могу центрировать блок вертикально и горизонтально с помощью Bootstrap?

У меня есть эта форма:

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

Как я могу сосредоточить этот блок (div span5 хорошо) по вертикали и по горизонтали? Спасибо.

Ответ 1

Горизонтальное центрирование может быть выполнено добавлением 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

Нет ничего противоречивого с Bootstrap, чтобы использовать некоторые JS для этого, такие как этот парень JQuery.vAlign плагин. Я нахожу это более прямым, чем трюки с вертикальным выравниванием.

Ответ 4

Горизонтальное центрирование было упомянуто ранее, чтобы установить маржу 0 auto.

Чтобы вертикально выровнять элемент динамически (когда вы не знаете высоту), вы можете относительно сдвинуть его на 50% (вверх или вниз), а затем использовать transform: translateY (50%) (+/-), чтобы центрировать его внутри его родительский контейнер:

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

fiddle