Centrar una columna usando Twitter Bootstrap
¿Cómo centro un div de un tamaño de columna dentro del contenedor (12 columnas) en Twitter Bootstrap 3 ?
.centered {
background-color: red;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>Quiero que divuna clase .centeredesté centrada dentro del contenedor. Puedo usar una fila si hay varios divs, pero por ahora solo quiero una divcon el tamaño de una columna centrada dentro del contenedor (12 columnas).
Tampoco estoy seguro de que el enfoque anterior sea lo suficientemente bueno ya que la intención no es compensarlo diva la mitad. No necesito espacios libres fuera del divy el contenido del divencogimiento en proporción. Quiero vaciar el espacio fuera del div para que se distribuya uniformemente (reducir hasta que el ancho del contenedor sea igual a una columna).
Hay dos métodos para centrar una columna <div>en Bootstrap 3:
Método 1 (compensaciones):
El primer enfoque utiliza las propias clases de compensación de Bootstrap, por lo que no requiere cambios en el marcado ni CSS adicional. La clave es establecer un desplazamiento igual a la mitad del tamaño restante de la fila . Entonces, por ejemplo, una columna de tamaño 2 se centraría agregando un desplazamiento de 5, es decir (12-2)/2.
En marcado esto se vería así:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Ahora bien, este método tiene un inconveniente obvio. Solo funciona para tamaños de columnas pares , por lo que solo se admiten .col-X-2, .col-X-4, col-X-6, col-X-8y .col-X-10
Enfoque 2 (el viejo margin:auto)
Puede centrar cualquier tamaño de columna utilizando esta margin: 0 auto;técnica probada. Solo necesita encargarse de la flotación que agrega el sistema de cuadrícula de Bootstrap. Recomiendo definir una clase CSS personalizada como la siguiente:
.col-centered{
float: none;
margin: 0 auto;
}
Ahora puede agregarlo a cualquier tamaño de columna en cualquier tamaño de pantalla y funcionará perfectamente con el diseño responsivo de Bootstrap:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Nota: Con ambas técnicas, puede omitir el .rowelemento y tener la columna centrada dentro de a .container, pero notará una diferencia mínima en el tamaño real de la columna debido al relleno en la clase contenedora.
Actualizar:
Dado que v3.0.1 Bootstrap tiene una clase incorporada llamada center-blockque usa margin: 0 auto, pero falta float:none, puede agregarla a su CSS para que funcione con el sistema de grid.
Bootstrap 5 (actualización 2023)
Bootstrap 5 también está basado en flexbox , por lo que el centrado es similar a Bootstrap 4. Los márgenes automáticos se pueden usar para empujar columnas hacia el centro...
<div class="row">
<div class="col-3 mx-auto text-center border">
<p>
I'm centered (margin: auto)
</p>
</div>
</div>
-O-
Utilice las clases de utilidad flexbox (es decir:) justify-content-centerpara centrar...
<div class="row justify-content-center">
<div class="col-4 text-center border">
<p>
I'm centered
</p>
</div>
</div>
https://codeply.com/p/9mpTQJ3fIn
Bootstrap 4 (actualización 2020)
Con Bootstrap 4 basado en flexbox , los métodos de centrado han cambiado.
text-centertodavía se usa paradisplay:inlineelementosmx-autoreemplazacenter-blockadisplay:blocklos elementos centralesoffset-*omx-autose puede utilizar para centrar las columnas de la cuadrícula
mx-auto(márgenes automáticos del eje x) centrará display:blocklos display:flexelementos que tengan un ancho definido , ( %,,,, etc.). Flexbox se usa de forma predeterminada en las columnas de la cuadrícula, por lo que también existen varios métodos de centrado de Flexbox.vwpx
Demostración de Bootstrap 4 Centrado horizontal
Para centrado vertical en BS4, consulte https://stackoverflow.com/a/41464397/171456
Bootstrap 3 (respuesta original)
El método preferido para centrar columnas es utilizar "desplazamientos" (es decir: col-md-offset-3)
Ejemplos de centrado de Bootstrap 3.x
Para centrar elementos , existe una center-block clase auxiliar .
También puede utilizarlo text-centerpara centrar el texto (y los elementos en línea).
Demostración receptiva : https://codeply.com/p/sRH9hSKup1
EDITAR : como se menciona en los comentarios,center-blockfunciona en el contenido ydisplay:blocklos elementos de las columnas, pero no funciona en la columna en sí (col-*divs) porque Bootstrap usafloat.
