ionic-framework - 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%;
}