How to center a row of ion-fabs?

Question

I want to center vertically and horizontally this row of ion-fabs, but at the moment it sits on the top and into the start position, I've tried every single html/css trick, but it doesn't work. I have to mention that I'm working it on a modal (I don't know if it's relevant or not, but whatever) soo, here's my example

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-fab-button size="large" fab-fixed color="danger">
          <ion-icon name="trash-outline"></ion-icon>
        </ion-fab-button>
      </ion-col>
      <ion-col>
        <ion-fab-button size="large" fab-fixed color="primary">
          <ion-icon name="camera-outline"></ion-icon>
        </ion-fab-button>
      </ion-col>
      <ion-col>
        <ion-fab-button size="large" fab-fixed color="secondary">
          <ion-icon name="image-outline"></ion-icon>
        </ion-fab-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Answer 1

On ion-grid just added "fullheight center" class

<ion-grid class="fullheight center">
<ion-row>
  <ion-col>
    <ion-fab-button size="large" fab-fixed color="danger" (click)="imgUploader.deleteProfilePic(firebaseID)">
      <ion-icon name="trash-outline"></ion-icon>
    </ion-fab-button>
  </ion-col>
  <ion-col>
    <ion-fab-button size="large" fab-fixed color="primary">
      <ion-icon name="camera-outline"></ion-icon>
    </ion-fab-button>
  </ion-col>
  <ion-col>
    <input style="display: none" type="file" (change)="imgUploader.selectProfilePic($event, firebaseID)" #fileInput>
    <ion-fab-button size="large" fab-fixed color="secondary" (click)="fileInput.click()">
      <ion-icon name="image-outline"></ion-icon>
    </ion-fab-button>
  </ion-col>
  <br>
  <ion-progress-bar *ngIf="imgUploader?.upload_progress !== null" value="{{imgUploader?.upload_progress/100}}"></ion-progress-bar>
</ion-row>

Answer 2

Using CSS Flexbox to horizontally and vertically align the column content along the main and cross axis seems to do the trick. I wasn't sure if you were using the ionic-framework with React or Angular but after getting into a sandbox environment, I found out it was indeed angular by the casing of the tag names.

Here is the StackBlitz Demo to have a look at.

I included a code snippet below but the icons aren't rendering in so I added some text to show everything is still working in terms of vertically/horizontally centering. The ionic-framework isn't included so the ion-grid also is not styling correctly but just look at the StackBlitz sandbox link for a better representation.

ion-col {
  border: 1px solid grey;
  height: 8rem; /* alter or remove this */
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<ion-app>
  <ion-header>
    <ion-toolbar>
     <ion-title>Flexbox Centering Demo</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content padding>
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-fab-button size="large" fab-fixed color="danger">
          Some Text
            <ion-icon name="trash-outline"></ion-icon>
          </ion-fab-button>
        </ion-col>
        <ion-col>
          <ion-fab-button size="large" fab-fixed color="primary">
          Some Text
            <ion-icon name="camera-outline"></ion-icon>
          </ion-fab-button>
        </ion-col>
        <ion-col>
          <ion-fab-button size="large" fab-fixed color="secondary">
           Some Text
            <ion-icon name="image-outline"></ion-icon>
          </ion-fab-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>
</ion-app>