Bottom and center

Ionic Framework
1

I’m looking at a Ionic tutorial that is a year old, and I made with it a basic page HTML page with Ionic components :

<body>
    <ion-app>
        <ion-header>
            <ion-toolbar color="primary">
                <ion-title >Budget Planner</ion-title>
            </ion-toolbar>
        </ion-header>

        <io-content>
            <ion-card>
                <ion-card-header>New Expense</ion-card-header>
                <ion-card-content>
                    <ion-item>
                        <ion-label position="floating">Expense Reason</ion-label>
                        <ion-input type="text"></ion-input>
                    </ion-item>
                    <ion-item>
                        <ion-label position="floating">Expense Amount</ion-label>
                        <ion-input type="number"></ion-input>
                    </ion-item>
                </ion-card-content>
            </ion-card>
            
        </io-content>
        
        <ion-footer>
            <ion-toolbar>
                <ion-title>Footer</ion-title>
            </ion-toolbar>
        </ion-footer>
    </ion-app>

The result is this :

ionic
ionic325×571 11.5 KB

My question is why is it centered vertically and how could I make each new component not “start from the bottom” but from the top.
When I hadn’t had the footer. The components would be at the bottom of the page.
Note : in the tutorial I’m watching this doesn’t happen so I’m wondering if it’s normal or maybe I missed something