Question

我创建了一个带有角度材质的示例角度4应用程序。我试图将卡片放在视图中心。但它不起作用。下面是代码

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<router-outlet></router-outlet>

login.component.html

<div  ng-cloak=""  layout-fill layout="column" style="background:green" layout-align="center">
    <div flex="50" layout="row" layout-align="center">
      <md-card flex="50"></md-card>
    </div>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { MdCardModule,MdInputModule } from '@angular/material';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

将类添加到md-card这样的内容：

.center{
  width: 75%;
  margin: 10px auto;
}

.main-div{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML：

<div class="main-div">
  <md-card class="z-depth center" flex="50" >Simple card</md-card>
</div>

demo

如何在角材料4中心对齐卡？

1 个答案: