Vertically align center

Ionic Framework ionic-v3
1

I’ve googled around but what is a relatively simple idea seems to be a nightmare to implement. I have a particular page where i dont want any kind of scrolling, and some content fixed in the middle of the page. I’ve tried adding flexbox css to the ion-content, and setting scroll=false, but the content still gets docked to the top of the screen.

How is vertical alignment set in Ionic 2?

1 Like
2

This works for me:

  height: 100%;
  display: block;
  vertical-align: middle;
2 Likes
3

If you use flex box you need to set the container height to the size you want

4

Did you got this to work?

I also have one page, with no scrolls and I just want to center vertically the content.

<ion-content center text-center>
  <ion-grid>
        <ion-row center>
              <ion-col>
                    <h1 text-uppercase no-padding no-margin>Welcome</h1>
                    </hr>
                    <h3 no-padding no-margin>Username</h3>
              </ion-col>
        </ion-row>
  </ion-grid>
5

Use flexbox css :slight_smile:

There’s a great guide here on how to use it…

2 Likes
6

Thank you for the info!

I created a css class:

.vertical-align-content > *
{
     display: flex!important;
     align-content: center!important;
     align-items: center!important;
}

And applied it to the ion-content:

<ion-content text-center class="vertical-align-content">
  <ion-grid>
        <ion-row>
              <ion-col>
                    <h1 text-uppercase no-padding no-margin>Wellcome</h1>
                    <horizontalrule></horizontalrule>
                    <h3 no-padding no-margin>Username</h3>
              </ion-col>
        </ion-row>
  </ion-grid>
 </ion-content>

and it’s centered! :wink:

But, shouldn’t the ionic2 have a helper for this?

22 Likes
7

The above works great, but I have found when decreasing the size of the viewport when there is overflow content will get chopped off :frowning:

1 Like
8

For some reason on the emulator when the device is vertical, the css doesn’t work. When I rotate it, it works. Really weird

9

My solution is applying a simple SCSS command to row in your app.scss file, because row is a flexbox object in Ionic. Hope it helps :wink: ``

.row{
  align-items: center;
}
21 Likes
10

Hey, this class works for centering elements vertically

.Absolute-Center {
      width: 100%;
      height: 100%;
      //overflow: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
}
2 Likes
11

display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100%;

11 Likes
12

Thanks dude!! This perfectly worked for me

13

I would suggest just using a simple grid…

<ion-grid>
<ion-row>
<ion-col col-3></ion-col>            ---> blank space before center 
<ion-col col-6> Your centered content </ion-col>    
<ion-col col-3></ion-col>             ---> blank space after center 
</ion-row>
</ion-grid>
1 Like
14

Thanks.

I’m running something similar to this now.

This did it for me:

margin: auto;

<ion-list>         
      <ion-item ion-item *ngFor="let item of myAssociativeArr" >      
        <ion-row>
          <ion-col col-2>
            <button ion-button large class = "button icon button-large" (click)="itemTapped($event, item);">
              <ion-icon id="button_id_{{item.index_id}}"  class="button icon button-large" large [name]="item.icon"></ion-icon>
            </button>
          </ion-col>
          <ion-col col-10 style="margin: auto; padding-left: 1em;">
            <h2 [innerHTML]="item.title"></h2>
            <p [innerHTML]="item.summary"></p>             
            </ion-col>
      </ion-row> 
    </ion-item>
  </ion-list>
2 Likes
15

Same happends to me.
I find this solution: I want ion-list to be vertical middle and horizontal center

16

You can use the following to align content vertically centered:

<ion-row justify-content-center align-items-center style='height: 100%'>
//content
</ion-row>
10 Likes
17

Thank you very much! It works!