我需要一些帮助。我试图居中一个离子网格，但即使与边距自动，它不是在页面居中与下面的代码。你能帮助我吗？

<ion-header>
  <ion-toolbar>
    <ion-title>payer-note-de-frais</ion-title>
    <ion-button [routerLink]="['/home']">Accueil</ion-button>
    <ion-button [routerLink]="['/presence']">Presences</ion-button>
  </ion-toolbar>
</ion-header>

<div class="divNoteDeFraisSelect">
  <label>Type de Note de Frais</label>
  <ion-item>
  <select>
    <option [ngValue]="null" disabled>Selectionner type de note de Frais</option>
    <option *ngFor="let item of this._noteDeFrais" [ngValue]="item.id">{{item.name}}</option>
  </select>
  <!--  Submit</ion-button>-->
 </ion-item>
</div>
<div class="divNoteDeFraisRegulieres">
  <ion-label>prix à l'unité</ion-label>
  <input #prixUnite type="number">
  <ion-label>nombre d'unité</ion-label>
  <input #nbUnite type="number">
  <ion-button>Ajouter des depenses</ion-button>
</div>
Et pour les notes de frais exceptionnels, le tableau:

<div class="tableauNoteDeFrais">
<ion-grid>
  <ion-row>
    <ion-col size="2"></ion-col>
    <ion-col size="2">1 ere semaine </ion-col>
    <ion-col size="2">2 eme semaine </ion-col>
    <ion-col size="2">3 eme semaine</ion-col>
    <ion-col size="2">4 eme semaine</ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="2">prix à l'unité </ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="2">nombres Unités</ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
    <ion-col size="2"><input class="inputGrid"type="number"></ion-col>
  </ion-row>
</ion-grid>
</div>
  <div class="button">
      <ion-button class="SubmitButton">Soumettre</ion-button>
  </div>

  Prendre une photo des factures:
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="takePhoto()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>

并且代码CSS是这样的：

ion-col{
 background-color: #135d54;
 border: solid 1px #fff;
 color: #fff;
 text-align: center;
  display: flex;
}
.divNoteDeFraisSelect{
 justify-content: center;
 margin: auto;
}
ion-grid{
 margin: auto;
}
tableauNoteDeFrais{
 margin: auto;
 justify-content: center;

}
.divNoteDeFraisRegulieres{
 width:18%;
 margin: auto;
}
.divNoteDeFraisRegulieres ion-label, .divNoteDeFraisRegulieres input {
 width: 100%;
 display: block;
}
ion-col {
 background-color: #135d54;
 border: solid 1px #fff;
 color: #fff;
 text-align: center;
}
.SubmitButton{
 width:30%;
 margin: auto;
 justify-content: center;
 display: block;
}
.inputGrid{
 width: 100%;
}

我需要什么？我不理解。这个css代码不会被离子网格css覆盖，不是吗？这个视图是：enter image description here
能帮我一下吗？
我需要一个答案为这CSS代码中心一个表在Angular 在离子