I can't center content properly in center, how to do it?

Question

I'm developing an Ionic 4 application, and I want to center the login in the exact middle of the page, but couldn't. I have tried scroll content changes, grid manipulation, ion-content flexbox, etc. The only thing that actually works is the 'text-center', which only aligns it horizontally...
How can I center all the content?

HTML

    <ion-content class="border-input">

      <ion-grid>

        <ion-row justify-content-center>

          <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">

            <div text-center>

              <h4>Acesse o aplicativo utilizando suas credenciais</h4>

            </div>

            <form (ngSubmit)="entrar()" [formGroup]="formLogin">

              <div>

                <ion-item class="margin-025" lines="none">

                  <ion-list>

                    <label item-content for="email">
                      E-Mail
                    </label>

                    <ion-grid>

                      <ion-row>

                        <ion-input class="border-input" text-wrap type="text" formControlName="email" autofocus></ion-input>

                        <div class="margin-left-0.5" text-center align-self-center ngxErrors="email">

                          <div [ngxError]="['required']" [when]="['touched']">

                            <ion-icon text-center class="error-icon" size="large" name="close"></ion-icon>

                          </div>

                        </div>

                      </ion-row>

                    </ion-grid>

                    <div ngxErrors="email">

                      <div [ngxError]="['required']" [when]="['touched']">

                        <p class="alert-validation">
                          O E-Mail está incorreto!
                        </p>

                      </div>

                    </div>

                  </ion-list>

                </ion-item>

                <ion-item class="margin-025" lines="none">

                  <ion-list>

                    <label item-content for="senha">
                      Senha
                    </label>

                    <ion-grid>

                      <ion-row>

                        <ion-input class="border-input" text-wrap type="password" formControlName="senha"></ion-input>

                        <div class="margin-left-0.5" text-center align-self-center ngxErrors="senha">

                          <div [ngxError]="['required']" [when]="['touched']">

                            <ion-icon text-center class="error-icon" size="large" name="close"></ion-icon>

                          </div>

                        </div>

                      </ion-row>

                    </ion-grid>

                    <div ngxErrors="senha">

                      <div [ngxError]="['required']" [when]="['touched']">

                        <p class="alert-validation">
                          A Senha está incorreta!
                        </p>

                      </div>

                    </div>

                  </ion-list>

                </ion-item>

              </div>

              <div>

                <ion-button expand="block" color="secondary" size="25%" type="submit" [disabled]="!formLogin.valid">Entrar</ion-button>

              </div>

            </form>

          </ion-col>

        </ion-row>

      </ion-grid>

    </ion-content>

CSS

            .select {
                min-width: 90%;
                max-width: 90%;
                width: 90%;
            }

            .border-input {
                border: solid 1px black;
                border-radius: 5px;
            }

            .margin-1 {
                margin: 1%;
            }

            .margin-025 {
                margin: 0.25%;
            }

            .alert-validation {
                color: red;
            }

            .error-icon {
                color: red;
            }

            ion-input {
                --padding-start: 12px !important;
            }

            ion-content {
                display:flex;
                justify-content:center;
                align-items:center;
                align-content:center;
            }

Answer 1

You could use flexbox to align the div.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/