En este corto tutorial de programación CSS con Tailwind vamos a ver cómo centrar un elemento verticalmente.

Centrado vertical

Entonces tenemos un div con las clases: flex y flex-row. Dentro de ese div tenemos otro div en el cual queremos centrar sus elementos, así:

<div class="flex flex-row m-1 rounded-md py-4 px-2 text-white" :class="clasesSegunTipo">
    <div class="mr-2 content-center">
        <InformationOutline></InformationOutline>
    </div>
    <slot name="default"></slot>
</div>

En este caso tengo el div con las clases flex y flex-row. Dentro de él tengo 2 elementos, y quiero centrar verticalmente con Tailwind CSS <InformationOutline> que es un icono, así que coloco la clase content-center al padre de dicho elemento, con el siguiente resultado:

Y así es como puedes centrar verticalmente dentro de un div con CSS y Tailwind.

Probando otros métodos, he logrado centrar verticalmente el contenido de un div con flex y flex-col agregando la clase justify-center en lugar de content-center.

Si el div es flex y flex-row entonces usa la clase items-center.

El ejemplo que te mostré no tiene flex ni flex-row, así que con content-center funciona.

Te dejo la documentación de align-items, justify-content y align-content.