Alineación vertical en Bootstrap 4

Tengo la siguiente configuración en Bootstrap 4: Bootply link

El elemento con el texto “Proveedor” en él debe estar centrado verticalmente, tengo diferentes filas con el mismo código y quiero que estén centradas. Ninguna solución parece funcionar para mí.

¿Puede alguien aquí encontrar lo que hice mal y señalarme en la dirección correcta?

Gracias.

Puedes usar la clase flex-xs-middle así …

Bootstrap 4 Alpha 5

 
Supplier
Supplier

http://www.codeply.com/go/PNNaNCB4T5 (Uso de Bootstrap 4 Flexbox habilitado CSS)

Bootstrap 4


ACTUALIZACIÓN para Bootstrap 4.0.0

Ahora que Bootstrap 4 es Flexbox por defecto, existen muchos enfoques diferentes para la alineación vertical utilizando: márgenes automáticos , utilidades FlexBox o utilidades de visualización junto con utilidades de alineación vertical . Al principio, las “utilidades de alineación vertical” parecen obvias, pero solo funcionan con elementos de visualización en línea y de tabla. A continuación se muestran las opciones de centrado vertical de Bootstrap 4. Recuerde, la alineación vertical es relativa a la altura de los padres .


1 – Centro vertical usando márgenes automáticos:

Otra forma de centrar verticalmente es usar my-auto . Esto centrará el elemento dentro de su contenedor. Por ejemplo, h-100 hace que la fila tenga una altura completa, y my-auto centrará verticalmente la col-sm-12 .

 
Card

Centro vertical usando demostración de márgenes automáticos

my-auto representa los márgenes en el eje y vertical y es equivalente a:

 margin-top: auto; margin-bottom: auto; 

2 – Centro vertical con Flexbox:

columnas verticales de rejilla central

Desde Bootstrap 4 .row ahora se display:flex puede simplemente usar align-self-center en cualquier columna para centrarlo verticalmente …

  
Center
Taller

o bien, use align-items-center en todo .row para alinear verticalmente el centro de todos los col-* en la fila …

  
Center
Taller

Vertical Center Diferentes columnas de altura Demo

Importante : ¡El padre directo del elemento a alinear debe tener una altura definida !


3 – Centro vertical usando los Utilizadores de pantalla:

Bootstrap 4 tiene utilidades de pantalla que se pueden usar para display:table , display:table-cell , display:inline , etc. Se pueden usar con las utilidades de alineación vertical para alinear elementos de línea, bloque en línea o celda de tabla.

 
I am centered vertically

Centro vertical usando Demo de Utilidades de pantalla