Tengo un proyecto generado por jhipster con vue ui (interfaz de usuario estándar de jhipster). Quiero cambiar el contenido a un componente de la tarjeta, pero no puedo centrarlo sin importar lo que intente. Intenté hacerlo con un div y luego justificar/alinear el centro de contenido y con b--container pero aún no tuve suerte. ¿Podría alguien mirar mi código y decirme qué tiene de malo?

Componente principal:

 <template> <div id="app"> <ribbon></ribbon> <div id="app-header"> <jhi-navbar></jhi-navbar> </div> <b-container fluid style="align-content: center; justify-content: center"> <router-view></router-view> </b-container> <jhi-footer></jhi-footer> </div> </template>

Routerview es en este caso mi componente renderizado que se implementa así:

 <template> <b-card title="Card Title" img-src="https://picsum.photos/600/300/?image=25" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2" > <b-card-text> Some quick example text to build on the card title and make up the bulk of the card's content. </b-card-text> <b-button href="#" variant="primary">Go somewhere</b-button> </b-card> </template>

Sería útil si alguien pudiera decirme qué está mal con mi código.