¿Cómo puedo centrar un bloque vertical y horizontalmente con Bootstrap?

Question

tengo este formulario:

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

Cómo puedo centrar ese bloque (div span5 también) vertical y horizontalmente? Gracias.

Answer 1

El centrado horizontal se puede hacer agregando margin: 0 auto a un elemento que no tenga hermanos.

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

No hay nada en conflicto con Bootstrap para utilizar algunos JS para esto, como this guy's JQuery.vAlign plugin. Encuentro eso más directo que los trucos de alineación vertical.

Answer 4

El centrado horizontal se mencionó anteriormente para establecer el margen 0 automático.

Para alinear verticalmente el elemento dinámicamente (cuando no conoce la altura) puede cambiarlo relativamente 50% (hacia arriba o hacia abajo) y luego usar transform: translateY (50%) (+/-) para centrarlo en su contenedor principal:

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

fiddle