Ionic flexbox 无法设置垂直输入

Question

我使用 flexbox 将我的按钮设置在页面中间。但无论我尝试什么，justify-content: center 都有效，但 align-items: center 会被忽略。

这是我的 HTML 代码：

<ion-content padding class="login">
  <div class="flex-container">
      <img src="assets/imgs/startbuttontext.png" class="flex-item" 
       style="height: 33vh;">
  </div>
</ion-content>

这里是我的 CSS：

.login {
    background: url(../assets/imgs/background1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: auto;
    z-index: 2;
    position: relative;


    .flex-container {
        display: flex !important;
        justify-content: center;
        align-items: center !important;

        .flex-item {
            padding:0 10px;
            display: flex;
            align-items: center !important;
            height: 33.3%;
        }
    }

}

Answer 1

您应该将高度设置为容器元素，而不是项目：

.flex-container {
    height: 33vh;
}