css - 我无法将内容正确居中，怎么办？

Question

我正在开发一个 Ionic 4 应用程序，我想将登录名集中在页面的正中间，但我做不到。我尝试过滚动内容更改、网格操作、ion-content flexbox 等。唯一真正有效的是“文本中心”，它只水平对齐...
如何让所有内容居中？

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

您可以使用 flexbox 来对齐 div。

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