<ion-row> centering column elements not working

Ionic Framework ionic-v3
1

Hi,

I’m trying to vertically and horizontally center the 2 buttons I have but it doesn’t seem to be working. I’m using the ion-grid and ion-row to do this. Where am I going wrong? Do I need to add some scss to make it work?

<ion-content padding>
  <ion-grid>
    <ion-row justify-content-center align-items-center>
      <ion-col>
        <button ion-button icon-left outline color="fb" (click)="fbClicked($event)">
  <ion-icon name="logo-facebook" color="#3B5998"></ion-icon>
  CONNECT WITH FACEBOOK
</button>
      </ion-col>
    </ion-row>
     <ion-row justify-content-center align-items-center>
      <ion-col>
        <button ion-button icon-left outline>
  <ion-icon name="logo-google"></ion-icon>
  CONNECT WITH GOOGLE
</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>