Bootstrap: centrar columnas

A continuación 3 formas diferentes de centrar horizontalmente una/s «columna/s» usando Bootstrap 3.

A. Usando la clase: col-*-offset-*

La clave es establecer una compensación igual a la mitad del tamaño restante de la fila. Para desplazar las columnas usamos la clase col-*-offset-*

Por ejemplo si tenemos una columna que ocupa 2 espacios (col-md-2) nos faltarían 10 para llegar a las 12 que es el total del grid. 10/2 = 5 (col-md-offset-5).

Modo de uso:

<div class="col-md-2 col-md-offset-5"></div>
<div class="col-md-4 col-md-offset-4"></div>
<div class="col-md-8 col-md-offset-2"></div>

Este método tiene el problema que si la columna que queremos centrar ocupa un espacio «impar» (col-md-3 por ejemplo) nunca llegaría a centrarse perfecta, porque al dividir el espacio restante entre 2 no daría un número entero.

B. Creando una clase nueva

Podemos crear una clase nueva, por ejemplo «col-center» con el siguiente css:

.col-center{
    float: none;
    margin: 0 auto;
}

Modo de uso:

<div class="col-md-1 col-center"></div>
<div class="col-md-4 col-center"></div>
<div class="col-md-9 col-center"></div>

Con este método podríamos centrar cualquier columna, da igual que ocupe un número de espacios par o impar.

C. Editando la clase «center-block»

A partir de Bootstrap 3.0.1 existe un nombre de clase que se llama «center-block» que posee un margin auto por ambos lados… Pero no tiene el float:none, que nos haría falta para el centrado de las columnas. Por lo tanto habria q añadir este css:

.center-block{
    float: none;
}

Modo de uso:

<div class="col-md-1 center-block"></div>
<div class="col-md-3 center-block"></div>
<div class="col-md-10 center-block"></div>

—

pd: «Yo usaría el método B».

Ver Demo