使用Flex Layout无法将mat-card定位在窗口中心的技术求助

别着急，我来帮你搞定这个居中的问题！其实只需要给外层容器加上几个Flex Layout的指令就能轻松实现，具体调整方案如下：

1. 调整HTML结构 #

首先，让外层容器占满整个视口并设置对齐方式，修改你的代码如下：

<div fxLayout="column" fxLayoutAlign="center center" style="min-height: 100vh; background: white;">
  <mat-card fxFlex="0 1 400px"> <!-- 400px可根据需求调整卡片宽度 -->
    <form (ngSubmit)="onSubmit(user.username)">
      <!-- 这里放你的表单元素，比如输入框、按钮 -->
      <mat-form-field appearance="fill">
        <mat-label>用户名</mat-label>
        <input matInput [(ngModel)]="user.username" name="username" required>
      </mat-form-field>
      
      <mat-form-field appearance="fill">
        <mat-label>密码</mat-label>
        <input matInput type="password" [(ngModel)]="user.password" name="password" required>
      </mat-form-field>
      
      <button mat-raised-button color="primary" type="submit">登录</button>
    </form>
  </mat-card>
</div>

2. 关键指令说明 #

• min-height: 100vh：让外层div最小高度等于视口高度，确保卡片能垂直居中在整个窗口
• fxLayoutAlign="center center"：第一个center控制水平居中，第二个控制垂直居中，两者结合实现卡片在窗口正中央
• fxFlex="0 1 400px"：给mat-card设置固定宽度，同时允许窗口缩小时卡片自动适配（第二个参数为flex-shrink），避免超出视口

3. 额外注意点 #

• 确认已在项目中导入Flex Layout模块，比如在app.module.ts中：

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    // 其他依赖模块
    FlexLayoutModule
  ]
})
export class AppModule { }

• 如果页面存在默认边距（比如body的默认margin），可在全局样式中去除：

body {
  margin: 0;
  padding: 0;
}

这样调整后，你的登录卡片就会稳稳地居中在窗口啦，快试试吧！

内容的提问来源于stack exchange，提问作者Heena