Cómo alinear un punto muerto de imagen con bootstrap

Estoy usando el framework bootstrap e intentando obtener una imagen centrada horizontalmente sin éxito.

Probé varias técnicas, como dividir el sistema de 12 rejillas en 3 bloques iguales, por ejemplo

¿Cuál es el método más fácil para obtener una imagen centrada en relación con la página?

Twitter Bootstrap v3.0.3 tiene una clase: bloque central

Bloques de contenido central

Establezca un elemento para visualizar: bloquear y centrar a través del margen. Disponible como mixin y clase.

Solo necesito agregar una clase “central-block” en la etiqueta img, se ve así

 

En Bootstrap ya tiene una llamada de estilo css. Bloque de centro

 .center-block { display: block; margin-left: auto; margin-right: auto; } 

Puedes ver una muestra de aquí

La forma correcta de hacerlo es

 

Agregue ‘center-block’ a la imagen como clase – no se necesitan css adicionales

  

Twitter bootstrap tiene una clase centrada en: .pagination-centered

Me funcionó:

 
header

El CSS para la clase es:

 .pagination-centered { text-align: center; } 

Actualización 2018

La clase de center-block ya no existe en Bootstrap 4 . Para centrar una imagen en Bootstrap 4, use mx-auto d-block https://stackoverflow.com/questions/10879955/how-to-align-an-image-dead-center-with-bootstrap/

  

Puedes usar lo siguiente. Es compatible con Bootstrap 3.x anterior.

 http://sofes.miximages.com/css/.. 

Suponiendo que no haya nada más junto a la imagen, la mejor manera es usar text-align: center en el img parent:

 .row .span4 { text-align: center; } 

Editar

Como se menciona en las otras respuestas, puede agregar la clase de arranque CSS .text-center al elemento principal. Esto hace exactamente lo mismo y está disponible en v2.3.3 y v3

Funciona para mi. intente usar center-block

 

Necesito lo mismo y aquí encontré la solución:

https://stackoverflow.com/a/15084576/1140407

 
This div will be centred.

y a CSS:

 [class*="span"].centred { margin-left: auto; margin-right: auto; float: none; } 

Parece que podríamos usar una nueva función HTML5 si la versión del navegador no es un problema:

en archivos HTML:

 
I will be in the center

Y en el archivo CSS, escribimos:

 body .loadingDiv { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

Y entonces el div podría estar perfectamente centrado en el navegador.

Puede usar la propiedad margin con la clase bootstrap img.

 .name-of-class .img-responsive { margin: 0 auto; } 

Deberías usar

 
.fluid-img { margin: 60px auto; } @media( min-width: 768px ){ .fluid-img { max-width: 768px; } } @media screen and (min-width: 768px) { .fluid-img { padding-left: 0; padding-right: 0; } }

Estoy usando la clase justify-content-center en una fila dentro de un contenedor. Funciona bien con Bootstrap 4.

 

Creé esto y lo agregué a Site.css.

 .img-responsive-center { display: block; height: auto; max-width: 100%; margin-left:auto; margin-right:auto; } 

Puede cambiar el CSS de la solución anterior de la siguiente manera:

 .container, .row { text-align: center; } 

Esto debería centrar todos los elementos en el div principal también.