how to vertically centre align ion-slides in ion-content?

I have an ion-slides page:

<ion-content padding>

    <ion-slides pager="true">
        <ion-slide class="step-one">
            <h1>Welcome</h1>
            <p>Lorem ipsum dolor sit amet, massa nam ante. Vel lacus viverra volutpat tortor ligula ornare, varius ut mauris ipsum mus torquent, scelerisque suspendisse penatibus, purus et arcu ipsum vehicula quam luctus. Consectetuer sed urna accumsan. Nec viverra felis varius pretium, volutpat in et cras, odio consectetuer lacinia risus feugiat sit etiam, commodo pulvinar, dolor non et inventore.</p>
            <p>  </p> <!-- TODO: figure out how to add spacing properly -->
        </ion-slide>

        <ion-slide class="step-two">
            <h1>Heading</h1>
            <p>blah, blah</p>
        </ion-slide>

        <ion-slide class="step-three">
            <h1>Heading</h1>
            <p>blah, blah</p>

            <ion-button (click)='finish()'>FINISH!</ion-button>
        </ion-slide>
    </ion-slides>

</ion-content>

How can I vertically centre the ion-slide? Currently it sits at the top of the page.

The solution for me was to add this css:

.slides {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100%;
}