Center grid in ion-content

Ionic Framework ionic-v3
1

Hi,
I’m using ionic 4 and need to center a grid inside a ion-content.
How I can do? I tried with text-center in ion-content but not work.

Thanks

home.page.html

<ion-header no-border>
  <ion-toolbar>
    <ion-grid>
      <ion-row>
        <ion-col size="5.8">
          <ion-item class="first">
            <ion-img [src]="categories[0].src"></ion-img>
          </ion-item>
        </ion-col>
        <ion-col></ion-col>
        <ion-col size="5.8">
          <ion-item class="second">
            <ion-img [src]="categories[1].src"></ion-img>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>

</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="1"></ion-col>
      <ion-col size="5">
        <ion-item class="first">
          <ion-img [src]="categories[2].src"></ion-img>
        </ion-item>
      </ion-col>
      <ion-col size="5">
        <ion-item class="second">
          <ion-img [src]="categories[3].src"></ion-img>
        </ion-item>
      </ion-col>
      <ion-col size="1"></ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="1"></ion-col>
      <ion-col size="5">
        <ion-item class="second">
          <ion-img [src]="categories[4].src"></ion-img>
        </ion-item>
      </ion-col>
      <ion-col size="5">
        <ion-item class="first">
          <ion-img [src]="categories[5].src"></ion-img>
        </ion-item>
      </ion-col>
      <ion-col size="1"></ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<ion-footer no-border>
  <ion-toolbar>
    <ion-grid>
      <ion-row>
        <ion-col size="5.8">
          <ion-item class="second">
            <ion-img [src]="categories[6].src"></ion-img>
          </ion-item>
        </ion-col>
        <ion-col></ion-col>
        <ion-col size="5.8">
          <ion-item class="first">
            <ion-img [src]="categories[7].src"></ion-img>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>

home.page.scss

...

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

UPDATE

@jaimax It works, thanks!

  <ion-grid class="my-grid">
    <ion-row class="parent-row">
      <ion-col size="1"></ion-col>
      <ion-col size="5">
        <ion-row>
          <ion-item class="first">
            <ion-img [src]="categories[3].src"></ion-img>
          </ion-item>
        </ion-row>
        <ion-row padding-top>
          <ion-item class="second">
            <ion-img [src]="categories[4].src"></ion-img>
          </ion-item>
        </ion-row>
      </ion-col>
      <ion-col size="5">
        <ion-row>
          <ion-item class="second">
            <ion-img [src]="categories[5].src"></ion-img>
          </ion-item>
        </ion-row>
        <ion-row padding-top>
          <ion-item class="first">
            <ion-img [src]="categories[6].src"></ion-img>
          </ion-item>
        </ion-row>
      </ion-col>
      <ion-col size="1"></ion-col>
    </ion-row>
  </ion-grid>
2

One solution would be to change the display mode of the <ion-content>. In the page’s scss file, add this:

ion-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
2 Likes
3

Can you show us the code, to see how to help you?

4

I tried but it doesn’t work.
egaldamez Yes, I added the code

6

My apologies. I forgot that you have to set the height of the containing element.

Try this:

div {
    height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
}

and the template

<ion-content>
  <div class="ion-padding">
    <ion-grid>
      <ion-row>
        <ion-col>
          ion-col
        </ion-col>
        <ion-col>
          ion-col
        </ion-col>
        <ion-col>
          ion-col
        </ion-col>
        <ion-col>
          ion-col
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>
1 Like
7

Centering any element can be a ball-ache, especially vertically. Try having a parent ion-row with height set to 100% with a) ion-cols all the way down or b) nested ion-cols and ion-rows (only one grid). Style both ion-grid and the parent ion-row.

.html

<ion-grid class="my-grid">
    <ion-row class="parent-row">
        ...
        ...
    </ion-row>
  </ion-grid>

.css

.my-grid {
    height: 100% !important;
 }
.parent-row {
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
 }

!important flags might not be necessary, but it often helps to start with them and notice what happens when they’re removed.

1 Like
8

Thx, that’s the right solution
I optimized it a bit, by using the ionic css utility classes.

This is an example for a login screen with a button

<ion-grid>
  <ion-row
    style="height: 100%;"
    class="ion-align-items-center ion-justify-content-center"
  >
    <ion-col>
      <ion-img src="assets/imgs/welcome.png"></ion-img>
      <ion-button expand="full">Login</ion-button>
    </ion-col>
  </ion-row>
</ion-grid>