ionic angular - how to center an ion-grid?

Question

I need some help. I am trying to center an ion-grid but even with margin auto, it's not centered in the page with below code. Could you help me?

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

and the code css is this :

    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%;
}

what I need ? i don't unserstand. the css code isn't be overwritted for ion-grid css, isn't it ? th wiew is: enter image description here

could you help me ?

i need an answer for the css code to center an table in angular in ionic

Answer 1

Try replacing <ion-row> by <ion-row class="ion-justify-content-center">

Here is the Alignment documentation