Я занимаюсь разработкой приложения для Ionic 4 и хочу центрировать логин точно в середине страницы, но не смог.Я пытался прокрутить изменения содержимого, манипулирование сеткой, flex-box с ионным содержимым и т. Д. Единственное, что на самом деле работает, это «текстовый центр», который выравнивает его только по горизонтали ...
Как я могу центрировать весь контент?
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;
}