Two elements aren't centered in mobile view

Why my two divs are not centered in mobile view? I’m using Vuetify CSS flex helper justify-center to achieve it but it doesn’t work. Using justify-sm-center it doesn’t work either. Where am I wrong?

<v-col cols="12">
    <v-card elevation="3" class="d-flex flex-column flex-sm-row justify-center pt-2 pb-2">
        <div class="pt-2 pl-4">
            <span class="textoDos--text"><strong>¿No estás registrado?</strong></span>
        </div>
        <div>
            <v-btn
            plain
            class="textoDos--text"
            to="/registro"
            >
            <strong>Crear una cuenta</strong>
            </v-btn>
        </div>
    </v-card>
</v-col>

Note: flex-direction is ok. I need it to be row in desktop/tablet and column in mobile.
You can check it in this codepen.

>Solution :

You could fix that using the helper class align-center :

  <v-card elevation="3" 
          class="d-flex flex-column flex-sm-row justify-center pt-2 pb-2 align-center">