Two elements aren't centered in mobile view-CodePudding

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" >
        <div >
            <span ><strong>¿No estás registrado?</strong></span>
        </div>
        <div>
            <v-btn
            plain
            
            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.

CodePudding user response：

It's because you're using column flex layout on small devices. justify-center works different when using column direction.

justify-center: Horizontal in row direction and Vertical on column direction.

align-center: Vertical in row direction and Horizontal in column direction.

Just add align-center in the v-card class and you're good to go.

<v-card elevation="3" >

CodePudding user response：

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

  <v-card elevation="3" 
          >