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?

css twitter-bootstrap

— soy yo
fuente

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

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

— soy yo
fuente

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

76

De la documentación de Bootstrap :

Establecer un elemento display: blocky centrar a través de margin. Disponible como mixin y clase.

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

— m0000g
fuente

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

— cssyphus
fuente

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

— Zim
fuente

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>

Expandir fragmento

— kirgiz_jigit
fuente

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>

— atabak
fuente

1

No funciona en ciertos casos (vea el comentario sobre esencialmente la misma respuesta y no hace uso de clases específicas de Bootstrap para centrar .)

— Dan Dascalescu

7

para el centrado horizontal puede tener algo como esto:

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

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

— Hombre persa
fuente

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>

— xander-miller
fuente

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

— alvseek
fuente

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>

Expandir fragmento

debe centrarse en el centro horizontal y verticalmente

— taoufiqaitali
fuente

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.

— en línea Thomas
fuente

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>

— Ramil Gilfanov
fuente