¿Cómo centrar vertical y horizontalmente este texto dentro de las columnas bootstrap4?

Tengo esta cuadrícula de bootstrap 4 con una fila que tiene una altura de 200px y dos columnas:

How to center this vertically/horizontally
This too

No estoy seguro de cómo puedo centrar el texto en ambas columnas, tanto vertical como horizontalmente.

Aquí hay un violín: http://jsfiddle.net/x1hphsvb/31/

He visto preguntas y respuestas similares en stackoverflow, pero no pude encontrar una respuesta que realmente funcionó en mi caso.

Entonces, ¿cómo hacer esto?

Usando la última versión (Bootstrap 4 alpha 6).

Utilice la clase align-items-center para centre verticalmente, y text-center para el centro horizontal …

 
How to center this vertically/horizontally
This too

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

Añádalos como clases a su text-center align-middle .

La documentación para estas clases se puede ver aquí:

Tipografía: https://v4-alpha.getbootstrap.com/utilities/typography/

Alineación vertical: https://v4-alpha.getbootstrap.com/utilities/vertical-align/

Si esto no funciona, alternativamente, puede agregar divisiones alrededor del tramo, darles una clase y dar a las clases los siguientes estilos: http://jsfiddle.net/x1hphsvb/32/

 .col-md-10{ height: 200px; } .col-md-2{ height: 200px; } .this-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .that-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
   
How to center this vertically/horizontally
This too

Puede centrar el texto horizontal y verticalmente al centrar los elementos debajo de ambas columnas.

Deberá agregar las siguientes tres clases

d-flex justify-content-center align-items-center

    
How to center this vertically/horizontally
This too

Usar position:relative y position:absolute más transform:translate() .

Cambié col-md a col-xs para que pueda ver el efecto en el fragmento (porque el fragmento es pequeño) .

También agregué height:100% a ambas columnas para que tomaran la altura del elemento principal y se puede ver que el span está centrado horizontal y verticalmente. Esto también se mantendrá alineado incluso cuando cambie el tamaño del navegador

 .col-xs-10, .col-xs-2 { position: relative; } .col-xs-10 span { position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); } .col-xs-2 span { position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); } 
  
How to center this vertically/horizontally
This too