Bootstrap 4 Alineación vertical y horizontal central


163

Tengo una página donde solo existe el formulario y quiero que el formulario se coloque en el centro de la pantalla.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

Las justify-content-centeralinea forma horizontal, pero no puedo encontrar la manera de alinear verticalmente. He intentado usar align-items-centery align-self-center, pero no funciona.

¿Qué me estoy perdiendo?

MANIFESTACIÓN

Respuestas:


322

Actualización 2019 - Bootstrap 4.3.1

No hay necesidad de CSS adicional . Lo que ya está incluido en Bootstrap funcionará. Asegúrese de que los contenedores del formulario sean de altura completa . Bootstrap 4 ahora tiene unh-100 clase para 100% de altura ...

Centro vertical:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://www.codeply.com/go/raCutAGHre

la altura del contenedor con el (los) artículo (s) al centro debe ser del 100% (o la altura deseada con relación al artículo centrado)

Nota: Cuando se utiliza height:100%( porcentaje de altura ) en cualquier elemento, el elemento toma la altura de su contenedor . En los navegadores modernos, height:100vh;se pueden usar unidades vh en lugar de% obtener la altura deseada.

Por lo tanto, puede establecer html, body {height: 100%}, o usar la nueva min-vh-100clase en el contenedor en lugar de h-100.


Centro horizontal:

  • text-centerpara centrar display:inlineelementos y contenido de columna
  • mx-auto para centrar dentro de elementos flexibles
  • offset-*o mx-autose puede usar para centrar columnas ( .col-)
  • justify-content-centerpara centrar columnas ( col-*) dentrorow

Centro de alineación vertical en Bootstrap 4
Bootstrap 4 forma centrada a pantalla completa
Bootstrap 4 grupo de entrada central
Bootstrap 4 horizontal + vertical centro pantalla completa


¿Está bien usar la <section>etiqueta, o debería uno apegarse a <div>s para centrar el contenido horizontal y verticalmente en la ventana gráfica? Tengo un sitio existente que tiene páginas con secciones que cambian de color y / o imágenes de fondo.
Adrian

¿No debería cualquier hijo directo de fila ser un .col?
Miguel Stevens

77
Esta respuesta está un poco rota. Usted declara explícitamente "NO HAY NECESIDAD de CSS adicional", pero eso está mal. En su ejemplo de código, muestra que debe configurar body y html para que estén 100% en CSS fuera de Bootstrap 4. Sin este CSS adicional, su solución no funciona.
Mayor mayor

1
No, body y html no están "fuera". ¡También se les pueden agregar clases CSS de Bootstrap! codeply.com/go/5ifNMHKUEy @dawn .. ¿Qué no funcionó específicamente? Tu comentario no es útil.
Zim

El contenedor no necesitaba 100% pero h-100 justify-content-center align-items-centerfuncionó
JMP

18

Este trabajo para mi:

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>

1
No olvides agregar estilos CSS:<style type="text/css"> html, body{ height: 100%; } .full-page{ height: 100vh; width: 100vw; } </style>
pyOwner

15

Flexbox puede ayudarte. información aquí

<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
    <div class="p-2">
     1
    </div>
    <div class="p-2">
     2
    </div>
</div>

10

Necesita algo para centrar su forma. Pero debido a que no especificó una altura para su html y cuerpo, simplemente envolvería el contenido, y no la ventana gráfica. En otras palabras, no había espacio para centrar el artículo.

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}

1
Además, la h-100clase util se puede utilizar height:100%en Bootstrap 4.
Zim

1
Ahora aconsejo usar la solución @ZimSystem porque no necesita CSS personalizado y solo usa las clases proporcionadas por Bootstrap.
Bram Vanroy

1
@BramVanroy, como dijiste, utilicé la solución de ZimSystem pero no funcionó para mí. su solución funciona en las actualizaciones de la versión 4.0.0 y 4.1.0 también
Sahan Pasindu Nirmal

9

Bootstrap tiene centro de texto para centrar un texto. Por ejemplo

<div class="container text-center">

Cambias lo siguiente

<div class="row justify-content-center align-items-center">

a lo siguiente

<div class="row text-center">

7

Ninguno me ha funcionado. Pero el suyo sí.

Dado que ahora se muestra la clase .row de Bootstrap 4: flex, simplemente puede usar la nueva utilidad flexbox align-self-center en cualquier columna para centrarla 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>

Lo aprendí de https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff


2

Esto está funcionando en IE 11 con Bootstrap 4.3 . Mientras que las otras respuestas no funcionaban en IE11 en mi caso.

 <div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>

0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-12 border border-info">
          <div class="d-flex justify-content-center align-items-center" style="height: 100px">
              <a href="#" class="btn btn-dark">Transfer</a>
              <a href="#" class="btn btn-dark mr-2 ml-2">Replenish</a>
              <a href="#" class="btn btn-dark mr-3">Account Details</a>
          </div>
    </div>


0

Use este código en CSS:

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}

0

Terminé aquí porque tenía un problema con el sistema de cuadrícula Bootstrap 4 y un bucle Angular * ngFor. Lo arreglé aplicando una clase col justify-content-center al div que implementa el ngFor:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
  <div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
</div>

lo que da el resultado: ingrese la descripción de la imagen aquí


0

Del documento (bootsrap 4):

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
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.