¿Cómo obtienes contenido centrado usando Twitter Bootstrap?

Estoy tratando de seguir un ejemplo muy básico. Usando la página de inicio y el sistema de cuadrícula , esperaba lo siguiente:

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

... produciría texto centrado.

Sin embargo, todavía aparece en el extremo izquierdo. ¿Qué estoy haciendo mal?

Esto es para el centrado de texto (de eso se trataba la pregunta )

Para otros tipos de contenido, vea la respuesta de Flavien .

Actualización: Bootstrap 2.3.0+ Respuesta

La respuesta original era para una versión inicial de bootstrap. A partir de bootstrap 2.3.0, simplemente puede darle al div la clase.text-center .

Respuesta original (pre 2.3.0)

Necesita definir una de las dos clases, rowo span12con a text-align: center. Ver http://jsfiddle.net/xKSUH/ o http://jsfiddle.net/xKSUH/1/

NOTA: esto se eliminó en Bootstrap 3 .

Pre-Bootstrap 3, puede usar la clase CSS de pagination-centeredesta manera:

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

La clase pagination-centeredya está en bootstrap.css (o bootstrap.min.css) y tiene la única regla:

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

Con Bootstrap 2.3.0. solo usa classtext-center

Supongo que la mayoría de la gente aquí está buscando la forma de centrar tododiv y no solo el contenido del texto (lo cual es trivial ...).

La segunda forma (en lugar de usar text-align: center) para centrar las cosas en HTML es tener un elemento con un ancho fijo y un margen automático (izquierda y derecha). Con Bootstrap, el estilo que define los márgenes automáticos es la clase "contenedor".

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

Eche un vistazo aquí para obtener un violín: http://jsfiddle.net/D2RLR/7788/

Actualización 2019 - Bootstrap 4

"Contenido centrado" puede significar muchas cosas diferentes, y el centrado de Bootstrap ha cambiado mucho desde la publicación original.

Centro horizontal

Bootstrap 3

• text-center se utiliza para display:inline elementos
• center-blockpara centrar display:blockelementos
• col-*offset-* para centrar columnas de cuadrícula
• mira esta respuesta para centrar la barra de navegación

Demo Bootstrap 3 Centrado horizontal

Bootstrap 4

• text-centertodavía se usa para display:inlineelementos
• mx-autoreemplaza center-blocka display:blockelementos centrales
• offset-* o mx-auto puede usarse para centrar columnas de cuadrícula
• justify-content-centeren rowtambién se puede utilizar para centrarcol-*

mx-auto(márgenes de auto-eje X) se centrarán display:blocko display:flexelementos que tienen una anchura definida , ( %, vw, px, etc ..). Flexbox se usa por defecto en las columnas de la cuadrícula, por lo que también hay varios métodos de centrado de flexbox.

Demo Bootstrap 4 Centrado horizontal

Centro vertical

Ahora que Bootstrap 4 es flexbox por defecto, existen muchos enfoques diferentes para la alineación vertical: márgenes automáticos , utilidades de flexbox o utilidades de visualización junto con utilidades de alineación vertical . Al principio, "utilidades de alineación vertical" parece obvio, pero solo funcionan con elementos de visualización en línea y de tabla. Aquí hay algunas opciones de centrado vertical Bootstrap 4.

1 - Centro vertical usando márgenes automáticos:

Otra forma de centrar verticalmente es usar my-auto. Esto centrará el elemento dentro de su contenedor. Por ejemplo, h-100hace que la fila tenga toda la altura y my-autocentrará verticalmente la col-sm-12columna.

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

Centro vertical con demostración de márgenes automáticos

my-auto representa los márgenes en el eje vertical y y es equivalente a:

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

2 - Centro vertical con Flexbox:

Dado que Bootstrap 4 .rowes ahora display:flex, simplemente puede usarlo align-self-centeren cualquier columna para centrarlo 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>

o, use align-items-centeren su totalidad .rowpara alinear verticalmente en el centro todo col-*en la fila ...

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

Demostración de columnas de altura vertical de centro vertical

3 - Centro vertical usando las utilidades de pantalla:

Bootstrap 4 tiene utils de visualización que se pueden utilizar para display:table, display:table-cell, display:inline, etc .. Estos pueden ser usados con los utils de alineación vertical a inline align, elementos de celda de tabla inline-block o.

<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 con demostración de utilidades de pantalla

Bootstrap 3.1.1 tiene una .center-blockclase para centrar divs. Ver: http://getbootstrap.com/css/#helper-classes-center .

Centrar bloques de contenido Establecer un elemento en display: blocky centrar mediante margin. Disponible como mixin y clase.

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

O, como ya han dicho otros, use la .text-centerclase para centrar el texto.

La mejor manera de hacer esto es definir un estilo CSS:

.centered-text {
    text-align:center
}    

Luego, donde sea que necesite texto centrado, lo agrega así:

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

o si solo quieres centrar la etiqueta p:

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

Cuanto menos css en línea use, mejor.

La clase .show-grid está aplicando texto alineado al centro en el ejemplo en el enlace.

Siempre puede agregar style="text-align:center"a su fila div o alguna otra clase, creo.

A partir de febrero de 2013, en algunos casos, agrego una clase "centrada" al div "span":

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

La razón de esto es porque los span * div se flotan hacia la izquierda, y la técnica de centrado de "margen automático" funciona solo si el div no se flota.

Demostración (en JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

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

Si usa Bootstrap 3, también tiene una clase CSS incorporada llamada .text-center . Eso es lo que quieres.

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

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

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

Por favor vea el ejemplo en jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

Bootstrap 2.3 tiene una text-centerclase.

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

Por mi parte, defino nuevos CSSestilos listos para usar y fáciles de recordar:

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

¿Es una buena idea? ¿Hay alguna buena práctica para esto?

Si está utilizando Bootstrap 2.0+

Esto puede hacer que el div se centre en la página.

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

Cualquier clase de utilidad de alineación de texto haría el truco. Bootstrap ha estado usando la .text-centerclase para centrar texto durante mucho tiempo.

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

O puede crear sus propias utilidades. Algunas variaciones que he visto a lo largo de los años:

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

Necesita ajustar con el .span.

Ejemplo:

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

Mi método preferido para centrar bloques de información mientras se mantiene la capacidad de respuesta (compatibilidad móvil) es colocar dos span1divisiones vacías antes y después del contenido que desea centrar.

<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 Bootstrap versión 3.1.1 y superior, la mejor clase para centrar el contenido es la .center-blockclase 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>

No use líquido contenedor en la tubería principal.

El bloqueo central también es una opción que no se menciona en las respuestas anteriores

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

Toda la clase center-block es decirle al elemento que tenga un margen de 0 automático, siendo el automático los márgenes izquierdo / derecho. Sin embargo, a menos que la clase text-center o css text-align: center; se establece en el elemento primario, el elemento no conoce el punto desde el que se puede calcular este cálculo automático, por lo que no se centrará como se esperaba.

Entonces text-center es una mejor opción.

Puedes usar cualquiera de los siguientes tipos

1. Use la clase existente Bootstrap text-center.
2. Adición de un estilo personalizado, style = "text-align:center".

3. Use un desplazamiento de columna:

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

Creé esta clase para mantener el centrado independientemente del tamaño de la pantalla y al mismo tiempo mantener características receptivas:

.container {
    alignment-adjust: central;
}

Simplemente use una clase, centro de texto, para el div o la etiqueta que desee. Creo que puede funcionar bien. Es una clase Bootstrap para el centro de alineación de texto.

Aquí hay algunas clases de Bootstrap de alineación de texto:

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>

Lo intenté de dos maneras, y funcionó bien para centrar el div. Ambas formas alinearán los divs en todas las pantallas.

Forma 1: Usando 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>

Camino 2: Usando Offset:

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

Explicación

Bootstrap designará a la izquierda, la primera columna de la ocupación de pantalla especificada. Si usamos offset o push, cambiará la columna 'this' por 'esas' muchas columnas. Aunque enfrenté algunos problemas en la capacidad de respuesta de la compensación, el impulso fue increíble.

Actualización 2018:

En Bootstrap 4.1.3 , el contenido puede centrarse usando la clase mx-auto.

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

Referencia: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering