Como centralizar uma div com Bootstrap2?

http://twitter.github.com/bootstrap/scaffolding.html

Eu tentei como todas as combinações:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

ou

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

mudou os números de intervalo e deslocamento ...

Mas não consigo colocar uma caixa simples perfeitamente centrada em uma página :(

Eu só quero uma caixa de 6 colunas centralizada ...

fez isso com

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

Mas a caixa é muito larga, há alguma maneira de fazer isso com o span7?

span7 offset2dá preenchimento extra à esquerda span7 offset3preenchimento extra à direita ...

além de diminuir a própria div para o tamanho desejado, reduzindo o tamanho espaço assim ... class="span6 offset3", class="span4 offset4"etc ... algo tão simples como style="text-align: center"na div poderia ter o efeito que você está procurando

você não pode usar span7 com qualquer deslocamento definido e obter o span centralizado na página (porque os spans totais = 12)

Os spans do Bootstrap são flutuados para a esquerda. Para centralizá-los, basta substituir esse comportamento. Eu faço isso adicionando isto à minha folha de estilo:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

Se você tiver essa classe definida, basta adicioná-la ao intervalo e pronto.

<div class="span7 center"> box </div>

Observe que esta classe central personalizada deve ser definida após o bootstrap css. Você poderia usar, !importantmas isso não é recomendado.

Bootstrap3 tem a .center-blockclasse que você pode usar. É definido como

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

Documentação aqui .

Se você quiser usar o bootstrap completo (e não o modo auto esquerda / direita), você precisa de um padrão que caiba em 12 colunas, por exemplo, 2 espaços em branco, 8 conteúdo, 2 espaços em branco. É isso que essa configuração fará. Ele cobre apenas as variantes -md- , tendo a ajustá -lo em tamanho real para pequeno adicionando col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Parece que você só queria centralizar um único contêiner. A estrutura de bootstrap pode estar complicando demais aquele exemplo, você poderia ter apenas um div autônomo com seu próprio estilo, algo como:

<div class="login-container">
  <!-- Your Login Form -->
</div>

e estilo:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

Isso deve funcionar bem se você estiver aninhado em algum lugar dentro de um .containerdiv bootstrap .

adicione o conteúdo central da classe

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

O código @ZuhaibAli meio que funciona para mim, mas eu mudei um pouco:

Eu criei uma nova classe em css

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

então o div se torna

<div class="center col-md-6"></div>

Eu adicionei col-md-6 para a largura da própria div, o que nesta situação significa que a div tem a metade do tamanho, há 1 -12 col md no bootstrap.

Siga esta orientação https://getbootstrap.com/docs/3.3/css/

Usar .center-block

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

envolva o div em um div pai com classe e rowdepois adicione estilo margin:0 auto;ao div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>