CODEWITHSUNDEEP
ionic-frameworkionic4
Yash Jain
Yash Jain

Reputation: 822

vertically centered row in ionic 4

I'm using Ionic version 4 and I want my login form in the application to be vertically centered.

I've tried many solutions present in stack overflow but looks like all works for Ionic version 3 and also tried some of the CSS tricks like margin 0 auto; and 

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

But didn't work for me.

enter image description here

This is how my forms looks like, I'm using bootstrap additionally and have no custom css classes added into the template.

Here's my template code.

<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>

Upvotes: 8

Views: 20217

Answers (3)

Shravan
Shravan

Reputation: 309

Try this code:

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

Upvotes: 2

Javier Avalos
Javier Avalos

Reputation: 31

My code works in 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>

Upvotes: 3

Brayan Garcia
Brayan Garcia

Reputation: 579

I did it using this styles

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

Upvotes: 24

Related Questions