Using css to vertical center does not work on ion-content

I’m pretty new to ionic, I’m starting to style out my app, and I would like my sign up form to be vertically centered on the page.

I have the following layout

<template>
  <ion-page>
    <ion-content>
      <ion-grid>
        <ion-row v-if="errorMessage">
          <ion-col>{{ errorMessage }}</ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>```

To try and have the full grid vertically centered I added this to my Vue file

ion-content {display: flex; align-items: center;}

I can see this css in the inspector, however it seems like it's not being applied, the content just stays at the top. am I missing something?