Cómo alinear un punto muerto de imagen con bootstrap

Estoy usando el marco de arranque e intento obtener una imagen centrada horizontalmente sin éxito.

He probado varias técnicas, como dividir el sistema de 12 cuadrículas en 3 bloques iguales, por ejemplo

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

¿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

Centrar bloques de contenido

Establezca un elemento para mostrar: bloque y centro a través del margen. Disponible como mixin y clase.

Solo necesito agregar una clase .center-blocken la imgetiqueta, se ve así

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

En Bootstrap ya tiene una llamada de estilo CSS .center-block

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

Puedes ver una muestra desde aquí

La forma correcta de hacer esto es

<div class="row text-center">
  <img ...>
</div>

Actualización 2018

La center-blockclase ya no existe en Bootstrap 4 . Para centrar una imagen en Bootstrap 4, use mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

Agregue 'center-block' a la imagen como clase: no se necesita CSS adicional

<img src="images/default.jpg" class="center-block img-responsive"/>

Twitter bootstrap tiene una clase que se centra: centrada en la paginación.

Me funcionó hacer:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

El CSS para la clase es:

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

Podrías usar lo siguiente. Es compatible con Bootstrap 3.x arriba.

<img src="..." alt="..." class="img-responsive center-block" />

Asumiendo que no hay nada más junto a la imagen, la mejor manera es usar text-align: centeren el imgpadre:

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

Editar

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

Funciona para mi. intenta usarcenter-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

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

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

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

y a CSS:

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

Puede usar la propiedad de margen con la clase bootstrap img.

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

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

en archivos HTML:

<div class="centerBloc">
  I will be in the center
</div>

Y en el archivo CSS, escribimos:

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

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

Deberías usar

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.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 justify-content-centerclass para una fila dentro de un contenedor. Funciona bien con Bootstrap 4.

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

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 padre divtambién.