离子幻灯片：在幻灯片中心垂直对齐的内容。如何？

Question

我想垂直对齐屏幕中央每张幻灯片上的内容。但似乎没有办法以我的内容在中心垂直对齐的方式来设计离子幻灯片的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%;
}

如何覆盖离子载玻片的css，以使载玻片的内容完全位于屏幕中间？

Answer 1

确保离子滑片具有足够的高度

$notice['success_message']

我将80vh与ion-slide{ height: 80vh;} 一起使用，但是如果没有<ion-header>，则可以使用100vh。

如果您仍然想将其设置为中间，则可以使用

<ion-header>