如何使用Flex Layout将Angular Material的mat-card垂直水平居中？

刚接触Flex Layout确实容易在对齐细节上踩坑，我来帮你搞定这个mat-card垂直居中的问题！

问题根源 #

你当前的外层div没有占据整个视口的高度，导致垂直方向没有足够的空间来实现居中效果——虽然设置了fxLayout="column"，但容器高度只是包裹内容的高度，自然看不出垂直居中的变化。

解决方案步骤 #

• 让父容器占满视口高度：给外层div添加min-height: 100vh样式（vh是视口高度单位，100vh就是整个屏幕的高度），确保容器有足够的垂直空间。
• 设置Flex对齐方式：用fxLayoutAlign="center center"来同时实现水平和垂直居中——这里第一个center控制垂直方向（因为fxLayout="column"的主轴是垂直方向），第二个center控制水平方向。

修改后的完整代码示例 #

<div fxLayout="column" fxLayoutAlign="center center" style="min-height: 100vh; background: white;">
  <mat-card>
    <!-- 你的登录表单内容 -->
    <mat-card-header>
      <mat-card-title>用户登录</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <form>
        <mat-form-field appearance="fill" style="width: 100%; margin-bottom: 1rem;">
          <mat-label>用户名</mat-label>
          <input matInput placeholder="请输入用户名" required>
        </mat-form-field>
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>密码</mat-label>
          <input matInput type="password" placeholder="请输入密码" required>
        </mat-form-field>
      </form>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-raised-button color="primary">登录</button>
    </mat-card-actions>
  </mat-card>
</div>

额外注意事项 #

别忘了确认你已经在Angular项目中正确导入了Flex Layout模块，否则fxLayout这类指令不会生效：

// 在你的AppModule或对应feature模块中
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  declarations: [
    // 你的组件
  ],
  imports: [
    // 其他必要模块（如MatCardModule、MatFormFieldModule等）
    FlexLayoutModule
  ]
})
export class AppModule { }

这样修改后，你的mat-card就能完美地在屏幕中央（水平+垂直）显示了！

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