Question

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

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

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

但是对我没用。

这是我的表单的样子，我另外使用了引导程序，并且没有在模板中添加自定义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>

离子4的垂直居中行

2 个答案: