ionic 4中垂直居中的行

Question

我使用的是 Ionic 版本 4，我希望应用程序中的登录表单垂直居中。

我已经尝试了堆栈溢出中存在的许多解决方案，但看起来所有这些都适用于 Ionic 版本 3，并且还尝试了一些 CSS 技巧，例如 margin 0 auto; 和

display:flex;
justify-content:center !important;
align-content:center !important;

但对我不起作用。

这是我的表单的样子，我另外使用了 bootstrap，并且没有自定义 css 类添加到模板中。

这是我的模板代码。

<ion-content color="light">
  <ion-grid>
    <ion-row class="ion-justify-content-center">
      <ion-col size-xs="9" size-md="9">
        <form>
            <div class="form-group">
              <input
                type="text"
                class="form-control"
                placeholder="Enter AccountID"
                autocomplete="off"
              />
            </div>
            <div class="form-group">
              <input
                type="email"
                class="form-control"
                placeholder="Enter Email"
                autocomplete="off"
              />
            </div>
            <div class="form-group">
              <input
                type="password"
                class="form-control"
                placeholder="Enter Password"
                autocomplete="off"
              />
            </div>
            <button type="submit" class="btn btn-primary btn-block">Submit</button>
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Answer 1

我用这个样式做的

ion-grid{
    height: 100%;
}
ion-row{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

Answer 2

我的代码适用于 Ionic v4

ion-grid{
    height: 100%;
}
ion-row{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

<ion-content>

  <ion-grid class="ion-text-center">
    <ion-row>
      <ion-col size="12">
       blaaaaaaaaaa
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

Answer 3

试试这个代码：

.vcenter{
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ionic 4中垂直居中的行

vertically centered row in ionic 4

ionic-framework

ionic4