I have a jhipster generated project with the vue ui (standard ui from jhipster). I want to change the content to a card component but I can not center it no matter what I try. I tried doing it with a div and then justify/align-content center and with b--container but still no luck. Could someone look at my code and tell me what is wrong with it?

MainComponent:

<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 is in this case my rendered component which is implemented like this:

<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>

It would be helpful if someone could tell me what is wrong with my code.