Cómo centrar un div con Bootstrap2?

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

He intentado como todas las combinaciones: 

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

O 

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

Se han cambiado los números span y offset...

Pero no puedo obtener una caja simple perfectamente centrada en una página : (

Solo quiero un cuadro de 6 columnas de ancho centrado...

editar:

Lo hizo con 

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

Pero la caja es demasiado ancha, ¿hay alguna manera de que pueda hacerlo con span7 ?

span7 offset2 da relleno extra a la izquierda span7 offset3 relleno adicional a la derecha...

Author: Darryl Mendonez, 2012-02-21
Source

8 answers

Además de reducir el div al tamaño que desee, reduciendo el tamaño del span de esta manera... class="span6 offset3", class="span4 offset4", etc... algo tan simple como style="text-align: center" en el div podría tener el efecto que estás buscando

No se puede usar span7 con cualquier desplazamiento establecido y obtener el span centrado en la página (Porque spans totales = 12)

 45
Author: csturtz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-30 12:12:50

Los tramos de Bootstrap flotan hacia la izquierda. Todo lo que se necesita para centrarlos es anular este comportamiento. Hago esto agregando esto a mi hoja de estilo:

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

Si tiene esta clase definida, simplemente agréguela al span y estará listo.

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

Tenga en cuenta que esta clase de centro personalizada debe definirse después de el css de bootstrap. Puedes usar !important pero eso no es recomendable.

 165
Author: Zuhaib Ali,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-22 19:10:43

Bootstrap3 tiene la clase .center-block que puede usar. Se define como

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

Documentación aquí.

 34
Author: Casey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-27 06:56:21

Si quieres hacer bootstrap completo (y no de la manera auto izquierda/derecha) necesitas un patrón que quepa dentro de 12 columnas, por ejemplo, 2 espacios en blanco, 8 contenido, 2 espacios en blanco. Eso es lo que hará esta configuración. Solo cubre las variantes -md-, tiendo a ajustarlo a tamaño completo para pequeñas agregando col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>
 20
Author: Craig,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-26 23:39:32

Suena como que solo quería centrar alinear un solo contenedor. El framework bootstrap podría estar complicando demasiado ese ejemplo, podrías haber tenido un div independiente con tu propio estilo, algo así como:

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

Y estilo: 

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

Eso debería funcionar bien si está anidado en algún lugar dentro de un div de bootstrap .container.

 8
Author: cstrat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-07 06:07:40

Añadir la clase centercontents 

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}
 3
Author: mrpix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-04 19:37:11

@ZuhaibAli código tipo de trabajo para mí, pero lo cambié un poco:

He creado una nueva clase en css 

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

Entonces el div se convierte en 

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

Agregué col-md-6 para el ancho del div en sí, lo que en esta situación significaba que el div es la mitad del tamaño, hay 1 -12 col md en bootstrap.

 0
Author: jakson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-20 12:09:32

Siga esta orientación https://getbootstrap.com/docs/3.3/css /

Use .center-block 

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 0
Author: core114,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-20 12:10:39