Center Grid/Row/Column Vertically

Ionic Framework
1

I’m new to Ionic and I like what I’ve seen so far, albeit a few limitations.

One simple thing I cannot grasp is whether there is a way to vertically align a card within a column/row/grid to center?

I’ve tried playing around with no joy but here is what I’ve added so far:

<ion-content color="primary" no-padding>
  <ion-grid>
    <ion-row justify-content-center align-items-center>
      <ion-col size="10" offset="1" text-center>
        <ion-text color="light">
          <h3>Welcome to my test app.</h3>
        </ion-text>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="10" offset="1" align-self-center>
        <ion-card color="dark" (click)="testClick()">
          <ion-card-content text-center>
            <h1><ion-icon name="help-circle-outline"></ion-icon></h1>
            <h2><strong>This is a test card with a click action</strong></h2>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Can anyone offer any guidance?

2

I frankly don’t understand the raison d’etre of the Ionic grid system, and find ordinary flexbox easier to work with. I also tend to get confused when people talk about vertical and horizontal centering, because sometimes they mean along an axis and sometimes against an axis. So, that being said, here’s one way to center your card along both axes, and if that’s not what you’re looking for, you should be able to find more neat suggestions in this piece.


<ion-content>
    <div class="xc fullheight">
        <ion-card color="dark">
            <ion-card-content text-center>
                <h1>
                    <ion-icon name="help-circle-outline"></ion-icon>
                </h1>
                <h2><strong>This is a test card with a click action</strong></h2>
            </ion-card-content>
        </ion-card>
    </div>
</ion-content>

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

.fullheight {
  height: 100%;
}
3

Thank you for your reply!

So in essence, you’re saying to remove the grid altogether?

How about if I have two or multiple cards which I want to vertically center? Add them all to separate divs?

4

There are things in life (well, programming life, anyway) where I have an opinion about how I would do things, and a smaller subset of those things includes those where I am going to try to convince you to share my opinion.

This is in the larger group, but not the smaller one. If you like Ionic’s grid for whatever reason, I’m not at all going to try to get you to abandon it; just saying that since I don’t use it, anything I have to say on this topic is going to be independent of any Ionic grid stuff. If you are interested, here is the companion page on grid layout that goes with the flexbox one from my last post.

When it comes to box model layout, any time I am faced with a question of “what if I want multiple elements to be laid out according to parameters A, B, and C?”, I reduce that problem to “how do I lay one element out according to A/B/C”, and then throw the multiple elements inside the one that’s laid out as desired. So, how about this?


<ion-content>
    <div class="xc fullheight">
        <div class="hcs">
        <ion-card color="dark">
            <ion-card-content text-center>
                <h1>
                    <ion-icon name="help-circle-outline"></ion-icon>
                </h1>
                <h2><strong>This is a test card with a click action</strong></h2>
            </ion-card-content>
        </ion-card>
            <ion-card>
                <ion-card-content text-center class="orange">
                    <h1>
                        <ion-icon name="nutrition"></ion-icon>
                    </h1>
                    <h2><strong>This is a reminder that carrots are an excellent source of vitamin A</strong></h2>
                </ion-card-content>
            </ion-card>
        </div>
    </div>
</ion-content>

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

.fullheight {
  height: 100%;
}

.hcs {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.orange {
  background-color: orange;
  color: white;
}