Como você obtém conteúdo centralizado usando o Twitter Bootstrap?

Estou tentando seguir um exemplo muito básico. Usando a página inicial e o sistema de grade , eu esperava o seguinte:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... produziria texto centralizado.

No entanto, ele ainda aparece na extrema esquerda. O que estou fazendo errado?

Isto é para a centralização de texto ( que era a questão )

Para outros tipos de conteúdo, consulte a resposta de Flavien .

Atualização: Bootstrap 2.3.0+ Answer

A resposta original era para uma versão inicial do bootstrap. No bootstrap 2.3.0, você pode simplesmente dar a div a classe.text-center .

Resposta original (pré 2.3.0)

Você precisa definir uma das duas classes rowou span12com a text-align: center. Consulte http://jsfiddle.net/xKSUH/ ou http://jsfiddle.net/xKSUH/1/

NOTA: isso foi removido no Bootstrap 3 .

Antes do Bootstrap 3, você poderia usar a classe CSS pagination-centeredassim:

<div class="span12 pagination-centered">
    Centered content.
</div>

A classe pagination-centeredjá está em bootstrap.css (ou bootstrap.min.css) e possui a única regra:

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

Com o Bootstrap 2.3.0. apenas use classetext-center

Eu acho que a maioria das pessoas aqui está realmente procurando uma maneira de centralizar o tododiv e não apenas o conteúdo do texto (o que é trivial ...).

A segunda maneira (em vez de usar text-align: center) para centralizar as coisas no HTML é ter um elemento com largura fixa e margem automática (esquerda e direita). Com o Bootstrap, o estilo que define margens automáticas é a classe "container".

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

Dê uma olhada aqui para um violino: http://jsfiddle.net/D2RLR/7788/

Atualização 2019 - Bootstrap 4

"Conteúdo centrado" pode significar muitas coisas diferentes, e a centralização do Bootstrap mudou muito desde a postagem original.

Centro Horizontal

Bootstrap 3

• text-centeré usado para display:inlineelementos
• center-blockcentralizar display:blockelementos
• col-*offset-* centralizar colunas da grade
• veja esta resposta para centralizar a barra de navegação

Demonstração Bootstrap 3 Centralização Horizontal

Bootstrap 4

• text-centerainda é usado para display:inlineelementos
• mx-autosubstitui center-blockpara centralizar display:blockelementos
• offset-* ou mx-auto pode ser usado para centralizar colunas da grade
• justify-content-centerno rowtambém pode ser usado para o centrocol-*

mx-auto(margens de auto eixo x) vai centrar display:blockou display:flexos elementos que têm uma largura definida , ( %, vw, px, etc ..). O Flexbox é usado por padrão nas colunas da grade, portanto, também existem vários métodos de centralização do flexbox.

Demonstração Bootstrap 4 Centralização Horizontal

Vertical Center

Agora que o Bootstrap 4 é flexbox por padrão, existem muitas abordagens diferentes para o alinhamento vertical usando: margens automáticas , utilitários flexbox ou os utilitários de exibição junto com os utilitários de alinhamento vertical . A princípio, "utilitários de alinhamento vertical" parece óbvio, mas eles funcionam apenas com elementos de exibição em linha e em tabela. Aqui estão algumas opções de centralização vertical do Bootstrap 4.

1 - Centro vertical usando margens automáticas:

Outra maneira de centralizar verticalmente é usar my-auto. Isso centralizará o elemento dentro de seu contêiner. Por exemplo, h-100aumenta a altura da linha e my-autocentraliza verticalmente a col-sm-12coluna.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Demonstração de centro vertical usando margens automáticas

my-auto representa margens no eixo y vertical e é equivalente a:

margin-top: auto;
margin-bottom: auto;

2 - Centro vertical com Flexbox:

Como o Bootstrap 4 .rowestá agora, display:flexvocê pode simplesmente usar align-self-centerem qualquer coluna para centralizá-lo verticalmente ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

ou use align-items-centerno todo .rowpara alinhar verticalmente todo o alinhamento col-*na linha ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Demonstração de colunas de altura diferente do centro vertical

3 - Centro vertical usando os utilitários de exibição:

Bootstrap 4 tem utils de visualização que podem ser utilizados para display:table, display:table-cell, display:inline, etc .. Estes podem ser usados com os utils alinhamento vertical para alinhar em linha, em linha ou bloco de elementos de célula de tabela.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Centro vertical usando a demonstração dos utilitários de exibição

O Bootstrap 3.1.1 possui uma .center-blockclasse para centralizar divs. Consulte: http://getbootstrap.com/css/#helper-classes-center .

Centralizar blocos de conteúdo Defina um elemento para display: blocke centralize via margin. Disponível como mixin e classe.

<div class="center-block">...</div>

Ou, como outros já disseram, use a .text-centerclasse para centralizar o texto.

A melhor maneira de fazer isso é definir um estilo css:

.centered-text {
    text-align:center
}    

Então, sempre que você precisar de texto centralizado, adicione-o da seguinte forma:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

ou se você quiser apenas a tag p centralizada:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

Quanto menos CSS embutido você usar, melhor.

A classe .show-grid está aplicando o texto alinhado ao centro no exemplo no link.

Você sempre pode adicionar style="text-align:center"à sua linha div ou alguma outra classe que eu pensaria.

Em fevereiro de 2013, em alguns casos, adicionei uma classe "centralizada" à div "span":

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

A razão para isso é que o span * div é flutuado para a esquerda e a técnica de centralização "margem automática" funciona apenas se o div não for flutuado.

Demonstração (no JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

Se você usa o Bootstrap 3, ele também possui uma classe CSS interna chamada .text-center . É isso que você quer.

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

Por favor, veja o exemplo em jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

O Bootstrap 2.3 tem uma text-centerclasse.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Do meu lado, defino novos CSSestilos prontos para usar e fáceis de lembrar:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

É uma boa ideia? Existe alguma boa prática para isso?

Se você estiver usando o Bootstrap 2.0+

Isso pode tornar a div centralizada na página.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

Qualquer classe de utilitário de alinhamento de texto faria o truque. O Bootstrap usa a .text-centerclasse para centralizar o texto há muito tempo.

.text-center { text-align: center !important; }

Ou você pode criar seus próprios utilitários. Algumas variações que eu vi ao longo dos anos:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

Você precisa ajustar com o .span.

Exemplo:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>
    <!--/span-->
    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>
        <form>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-key"></i> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>
        </form>
      </div>
    </div>
    <!-- /span -->
    <div class="span4"></div>
  </div>
  <!-- /row -->
</div>

Meu método preferido para centralizar blocos de informações enquanto mantém a capacidade de resposta (compatibilidade móvel) é colocar duas span1divs vazias antes e depois do conteúdo que você deseja centralizar.

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

Para o Bootstrap versão 3.1.1 e superior, a melhor classe para centralizar o conteúdo é a .center-blockclasse auxiliar.

<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

Não use fluido de recipiente na principal.

O bloco central também é uma opção não referida nas respostas acima

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

Tudo o que a classe center-blockfaz é dizer ao elemento que tenha uma margem de 0 automático, sendo as margens esquerda / direita automática. No entanto, a menos que a classe text-center ou css text-align: center; é definido no pai, o elemento não sabe o ponto para calcular esse cálculo automático, portanto, não se centrará como previsto.

Portanto, o centro de texto é uma opção melhor.

Você pode usar qualquer um dos tipos abaixo

1. Use a classe existente Bootstrap text-center .
2. Adicionando um estilo personalizado style = "text-align:center",.

3. Use um deslocamento de coluna:

   Exemplo: <div class="col-md-offset-6 col-md-12"></div>

Criei esta classe para manter o centro, independentemente do tamanho da tela, mantendo os recursos responsivos:

.container {
    alignment-adjust: central;
}

Basta usar uma classe, no centro de texto, para a div ou tag que você deseja. Eu acho que pode funcionar bem. É uma classe Bootstrap para o centro de alinhamento de texto.

Aqui estão algumas classes de alinhamento de texto do Bootstrap:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

Eu tentei de duas maneiras, e funcionou bem para centralizar o div. Ambas as formas alinham os divs em todas as telas.

Caminho 1: Usando o Push:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

Caminho 2: Usando deslocamento:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

Resultado:

Explicação

O Bootstrap designará, à esquerda, a primeira coluna da ocupação de tela especificada. Se usarmos offset ou push, a coluna 'this' será alterada por 'aquelas' muitas colunas. Embora eu tenha enfrentado alguns problemas em resposta à compensação, o push foi incrível.

Atualização 2018:

Em Bootstrap 4.1.3 , o conteúdo pode ser centrado usando a classe mx-auto.

<div class="mx-auto">
  Centered element
</div>

Referência: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering