Como alinhar um ponto morto da imagem com o bootstrap

Estou usando a estrutura de inicialização e tentando obter uma imagem centralizada horizontalmente sem sucesso ..

Eu tentei várias técnicas, como dividir o sistema de 12 grades em 3 blocos iguais, por exemplo

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

Qual é o método mais fácil de obter uma imagem centralizada em relação à página?

O Twitter Bootstrap v3.0.3 possui uma classe: bloco central

Blocos de conteúdo central

Defina um elemento para exibir: bloquear e centralizar por margem. Disponível como mixin e classe.

Só precisa adicionar uma classe .center-blockna imgtag, fica assim

<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>

No Bootstrap já tem chamada de estilo css .center-block

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

Você pode ver uma amostra daqui

A maneira correta de fazer isso é

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

Atualização 2018

A center-blockclasse não existe mais no Bootstrap 4 . Para centralizar uma imagem no Bootstrap 4, use mx-auto d-block...

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

Adicione 'bloco central' à imagem como classe - sem necessidade de css adicional

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

O bootstrap do Twitter tem uma classe que é centrada: .pagination-centrado

Funcionou para mim fazer:

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

O css da classe é:

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

Você pode usar o seguinte. Ele suporta o Bootstrap 3.x acima.

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

Supondo que não haja mais nada ao lado da imagem, a melhor maneira é usar text-align: centerno imgpai:

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

Editar

Conforme mencionado nas outras respostas, você pode adicionar a classe CSS de autoinicialização .text-centerao elemento pai. Isso faz exatamente a mesma coisa e está disponível nas v2.3.3 e v3

Funciona para mim. tente 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>

Eu preciso do mesmo e aqui encontrei a solução:

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

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

e para CSS:

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

Você pode usar a propriedade margin com a classe bootstrap img.

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

Parece que poderíamos usar um novo recurso HTML5 se a versão do navegador não for um problema:

em arquivos HTML:

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

E no arquivo CSS, escrevemos:

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

E assim a div pode estar perfeitamente centralizada no navegador.

Você deveria 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;
        }
}

Estou usando justify-content-centerclasse para uma linha dentro de um contêiner. Funciona bem com o Bootstrap 4.

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

Eu criei isso e adicionei ao Site.css.

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

Você pode alterar o CSS da solução anterior como abaixo:

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

Isso deve centralizar todos os elementos no pai divtambém.