集中md卡角材料
集中md卡角材料
提问于 2018-06-11 07:16:41
我使用angular 6和angular材质，但都不起作用。我想把我的登录卡放在页面中间
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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-11 07:25:35
将其添加到组件的css文件中
:host{
display: flex;
min-height: 100vh;
}
mat-card{
margin: auto;
}Stack Overflow用户
发布于 2018-06-11 07:24:28
您可以使用带有左定位和顶部定位的position:absolute，并且转换应该可以工作
* {
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50788846
复制相关文章
相似问题