Bottom and center

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 :

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

                <ion-card-header>New Expense</ion-card-header>
                        <ion-label position="floating">Expense Reason</ion-label>
                        <ion-input type="text"></ion-input>
                        <ion-label position="floating">Expense Amount</ion-label>
                        <ion-input type="number"></ion-input>

The result is this :

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