ionic-framework - ionic 载玻片 : vertical align content in center of slide. 如何？

Question

我想在屏幕中央垂直对齐每张幻灯片上的内容。但似乎无法以我的内容在中心垂直对齐的方式设置 ionic 幻灯片的 css。

我尝试了各种方法，但都没有对幻灯片产生影响。

<ion-slide>
 <h2>Date of Birth</h2>
 <p>Please select</p>
 <ion-item>
  <ion-datetime formControlName="birthday" displayFormat="DD- 
  MM-YYYY" picker-format="DD-MM-YYYY" cancelText="Cancel" 
  doneText="Done" placeholder="Day-Month-Year">
  </ion-datetime>
 </ion-item>
</ion-slide>

我试过 CSS:

.slide-container {
    vertical-align: center !important;
}

或者..

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

如何覆盖 ion-slides css，使幻灯片的内容完美地位于屏幕中间？

Answer 1

确保你的 ionic 载玻片有足够的高度

ion-slide{ height: 80vh;}

我将 80vh 与 <ion-header> 一起使用, 但没有 <ion-header>你可以使用 100vh。

如果你还想把它放在中间，你可以使用

ion-slide{ 
position: relative; 
top:50%;
transform: translate(0,-50%); 
}