Bootstrap 4 Center alineación vertical y horizontal

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

El justify-content-center alinea la forma horizontalmente, pero no puedo entender cómo alinearla verticalmente. He intentado usar align-items-center y align-self-center , pero no funciona.

¿Qué me estoy perdiendo?

MANIFESTACIÓN

Actualización 2018Bootstrap 4.0.0

No hay necesidad de CSS adicional . Lo que ya está incluido en Bootstrap funcionará. Asegúrese de que el contenedor (es) de la forma sea de altura completa . Bootstrap 4 ahora tiene una clase h-100 para una altura del 100% …

Centro vertical:

 

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

la altura del contenedor con el artículo (s) al centro debe ser del 100%

(o cualquiera que sea la altura deseada en relación con el elemento centrado)

Nota: Cuando se usa height:100% ( altura porcentual ) en cualquier elemento, el elemento toma la altura de su contenedor . En navegadores modernos vh unidades de height:100vh; se puede usar en lugar de % para obtener la altura deseada.


Centro horizontal:

  • display:inline centro de text-center al centro display:inline elementos en display:inline y contenido de la columna
  • mx-auto para centrar dentro de elementos flexibles
  • offset-* o mx-auto se pueden usar para centrar columnas ( .col- )
  • justify-content-center para centrar las columnas ( col-* ) dentro de la row

Vertical Alinee el centro en Bootstrap 4
Bootstrap 4 pantalla completa centrada formulario
Grupo de entrada del centro Bootstrap 4

Necesitas algo para centrar tu 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 lugar donde centrar el elemento.

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

Este trabajo para mí:

 

item 1

item 2

Flexbox puede ayudarte. información aquí

 
1
2