如何垂直居中对齐离子含量的离子载玻片？

Question

我有一个离子幻灯片页面：

<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>

如何使离子载玻片垂直居中？目前它位于页面顶部。

Answer 1

我的解决方案是添加这个 css:

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

如何垂直居中对齐离子含量的离子载玻片？

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

ionic4

ion-slides