varias formas de centrar verticalmente con flexbox:

 

¡Sí! Hay varias formas de centrar verticalmente con flexbox:

dando un pequeño paddin:

.container-card {
    padding: 15px;
}

1. Con height: 100vh (la más simple)

css

.container-card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;  /* Toda la altura de la ventana */
}

Problema: El menú de arriba también ocupa espacio y puede haber scroll

2. Con min-height: 100vh

css

.container-card {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;  /* Mínimo toda la altura */
}

3. Con height: 100% (requiere html/body al 100%)

css

html, body {
    height: 100%;  /* Los padres deben tener altura */
    margin: 0;
}

.container-card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;  /* Hereda la altura del body */
}

4. Con position: absolute + transform

css

.container-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

5. Con margin: auto en grid

css

.container-card {
    display: grid;
    place-items: center;  /* Centra horizontal y vertical */
    height: 100vh;
}

6. La que tú usaste (calculando la altura del menú)

css

.container-card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 48px);  /* Resta el menú */
}

La más recomendada para tu caso:

css

.container-card {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 48px);  /* Mínimo, resta el menú */
}

min-height es mejor porque si el contenido crece, la card no se corta.

¿Quieres que te muestre alguna de estas opciones en el código completo?