[英]Centralize md card angular material
我使用角度6和角度材料,但没有任何作用。 我想把我的登录卡放在页面中间
HTML:
<mat-card class="card" layout-align="center center">
<form (ngSubmit)="onSubmit(UserLogin)">
<div class="container">
<mat-form-field>
<input matInput placeholder="E-mail" [formControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Senha" [type]="hide ? 'password' : 'text'" [formControl]="password">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>
<div>
<button mat-raised-button color="accent" type="submit">Entrar</button>
</div>
</div>
</form>
</mat-card>
在组件的css文件中添加它
:host{
display: flex;
min-height: 100vh;
}
mat-card{
margin: auto;
}
您可以使用position:absolute
与left和top定位,transform应该可以工作
* { margin: 0; padding: 0; box-sizing: border-box; } body { position: relative; height: 100vh; } form { border: 1px solid; display: inline-block; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
<form> <div><input type="text" placeholder="First Name" name=""></div> <div><input type="text" placeholder="Last Name" name=""></div> <div><input type="text" placeholder="Email" name=""></div> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.