Twitter Bootstrap: cómo centrar elementos horizontal o verticalmente


285

¿Hay alguna forma de centrar elementos html vertical u horizontalmente dentro de los padres principales?


2
Esta es una gran publicación sobre el centrado horizontal y vertical: Ver aquí
markvandencorput

2
Yo también enfrentaba un problema de alineación horizontal; Simplemente usé la <center></center>etiqueta
Utpal - Ur Best Pal

44
@ Utpal-UrBestPal, la <center>etiqueta quedó en desuso hace unos 12 años.
Niels Keurentjes

Respuestas:


246

Actualización : si bien esta respuesta probablemente fue correcta a principios de 2013, ya no debería usarse. La solución adecuada utiliza compensaciones .


En cuanto a la sugerencia de otros usuarios, también hay clases nativas de arranque disponibles como:

class="text-center"
class="pagination-centered"

gracias a @Henning y @trejder


22
El mismo estilo ya está contenido en Bootstrap; solo useclass="text-center"
Henning

3
O .pagination-centeredcomo alternativa.
trejder

77
Esta debería ser la respuesta, los otros ignoran toda la parte 'de arranque' de la pregunta.
Ryan McDonough

1
@RyanMcDonough, sí, efectivamente, esto está suponiendo que todas las otras personas sugirieron, así que verifiqué como la respuesta ¿ok?
itsme

1
Usar text-centerpara el diseño es una muy mala práctica. La forma correcta de alinear columnas en Bootstrap es mediante el uso de col-XX-offset-Yclases. getbootstrap.com/css/#grid-offsetting . Esta respuesta probablemente fue correcta en 2013, pero ya no debe usarse más hoy.
Niels Keurentjes


55

Para futuros visitantes a esta pregunta:

Si está tratando de centrar una imagen en un div pero la imagen no se centra, esto podría describir su problema:

jsFiddle DEMO del problema

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

La img-responsiveclase agrega una display:blockinstrucción a la etiqueta de imagen, que impide que text-align:center( text-centerclase) funcione.

SOLUCIÓN:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

Agregar la center-blockclase anula la display:blockinstrucción introducida al usar la img-responsiveclase.

Sin la img-responsiveclase, la imagen se centraría simplemente agregando text-centerclase


Actualizar:

Además, debe conocer los conceptos básicos de flexbox y cómo usarlo, ya que Bootstrap4 ahora lo usa de forma nativa .

Aquí hay un excelente video tutorial de ritmo rápido de Brad Schiff

Aquí hay una gran hoja de trucos


32

Actualizado 2018

En Bootstrap 4 , los métodos de centrado han cambiado.

Centro horizontal en BS4

  • text-centertodavía se usa para display:inlineelementos
  • mx-autoreemplaza center-blockal centro de display:flexniños
  • offset-* o mx-auto puede usarse para centrar columnas de cuadrícula

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 de manera predeterminada 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

Para el centrado vertical en BS4, consulte https://stackoverflow.com/a/41464397/171456


30

Puede escribir directamente en su archivo CSS de esta manera:

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }
<div class = "content" >
  
   <p> some text </p>
  </div>


9

yo uso esto

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>


7

para el centrado horizontal puede tener algo como esto:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

44
No funciona (al menos no en la implementación actual), cuando se utiliza directamente en una imagen: <img src="img/logo.png" style="float:none; margin:0 auto" />. Rodear imga los padres divy dar .text-centero dar .pagination-centeredclases a los padres funciona de maravilla.
trejder

2
para centrar un elemento con margen: 0 automático, debe agregar un ancho a ese elemento. En el ejemplo anterior no se especifica el ancho porque span8 tiene un ancho en boobstrap pero su imagen no lo hace <img src = "img / logo.png" style = "float: none; margin: 0 auto; width: 300px" /> centrará horizontalmente esa imagen dentro del padre
Raul

2
Esto ignora la parte "Bootstrap" de la pregunta.
Dan Dascalescu

5

Me gusta esta solución de una pregunta similar. https://stackoverflow.com/a/25036303/2364401 Use la text-centerclase bootstraps en los datos reales de la tabla <td>y los <th>elementos del encabezado de la tabla . Entonces

<td class="text-center">Cell data</td>

y

<th class="text-center">Header cell data</th>


5

Con bootstrap 4 puedes usar flex

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

fuente: bootstrap 4.1


3

bootstrap 4 + Flex resuelve esto

puedes usar

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

debe centrarse en el centro horizontal y verticalmente


0

Descubrí en Bootstrap 4 que puedes hacer esto:

centro horizontal es de hecho text-centerclase

Sin embargo, el centro vertical, usando clases de bootstrap, está agregando ambos mb-auto mt-autopara que el margen superior y el margen inferior estén configurados en automático.


0

para bootstrap4 centro vertical de pocos artículos

d-flex para reglas flex

columna flexible para dirección vertical en artículos

justify-content-center para centrar

style = 'height: 300px;' debe tener para los puntos de ajuste donde el centro sea calc o use la clase h-100

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div> 
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.