Twitter Bootstrap: cómo centrar los elementos horizontal o verticalmente

¿Hay alguna forma de centrar elementos html vertical u horizontalmente dentro de los principales padres?

Actualización : aunque esta respuesta probablemente fue correcta a principios de 2013, ya no se debe usar. La solución adecuada utiliza compensaciones .


En cuanto a la sugerencia de otros usuarios, también hay clases de arranque nativas disponibles, como:

 class="text-center" class="pagination-centered" 

gracias a @Henning y @trejder

De la documentación de Bootstrap :

Establezca un elemento para display: block y centrar a través del margin . Disponible como mixin y clase.

 
...

Para futuros visitantes a esta pregunta:

Si está tratando de centrar una imagen en un div pero la imagen no se centrará, esto podría describir su problema:

jsFiddle DEMO del problema

 

La clase img-responsive agrega una display:block instrucciones a la etiqueta de la imagen, lo que impide que text-align:center (clase de text-center ) funcione.

SOLUCIÓN:

 

jsFiddle de la solución

Agregar la clase de center-block anula la display:block instrucción de display:block puesta usando la clase img-responsive .

Sin la clase img-responsive , la imagen se centraría simplemente agregando clase de text-center

Puede escribir directamente en su archivo css de esta manera:

 .content { position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); } 
 

some text

Actualizado 2018

En Bootstrap 4 , los métodos de centrado han cambiado.

Centro horizontal en BS4

  • text-center todavía se usa para la display:inline elementos en display:inline
  • mx-auto reemplaza center-block a la display:flex central display:flex children
  • offset-* o mx-auto se pueden usar para centrar columnas de cuadrícula

mx-auto (márgenes automáticos del eje x) centrará la display:block o display:flex elementos display:flex que tienen un ancho definido , ( % , vw , px , etc.). Flexbox se utiliza por defecto en columnas de cuadrícula, por lo que también hay varios métodos de centrado de flexbox.

Demo Bootstrap 4 Centrado horizontal

Para el centrado vertical en BS4, consulte https://stackoverflow.com/a/41464397/171456

yo uso esto

   
content here

para el centrado horizontal puedes tener algo como esto:

 .centering{ float:none; margin:0 auto } 

Me gusta esta solución de una pregunta similar. https://stackoverflow.com/a/25036303/2364401 Utilice la clase de text-center bootstraps en los elementos de tabla

y encabezado de tabla

. Asi que

Cell data

y

Header cell data

Con bootstrap 4 puedes usar flex

 

fuente: bootstrap 4.1