Angular Mat-Grid-Tile内元素垂直排列并居中对齐问题

方法1：利用mat-grid-tile内置容器实现Flex布局 #

mat-grid-tile内部默认包含mat-grid-tile-content容器，直接为该容器添加垂直flex布局即可：

mat-grid-tile .mat-grid-tile-content {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
}

该方式会让容器内的h1、span、表单自动垂直排列，同时保持水平居中。

方法2：嵌套容器隔离样式（解决优先级问题） #

如果直接修改内置容器样式无效，可给目标元素套一层自定义容器，通过容器控制布局：

<mat-grid-tile>
  <div class="login-content-wrapper">
    <h1>登录</h1>
    <span>欢迎返回系统</span>
    <form class="login-form">
      <!-- 表单控件（如mat-form-field） -->
    </form>
  </div>
</mat-grid-tile>

对应的CSS：

.login-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* 确保容器占满tile宽度 */
  gap: 16px; /* 可选：设置元素间距 */
}

.login-form {
  width: 80%; /* 可选：限制表单宽度，避免过宽 */
}

方法3：穿透Angular视图封装（针对样式不生效场景） #

若组件样式被Angular视图封装隔离，可使用::ng-deep穿透修改内置容器样式：

:host ::ng-deep mat-grid-tile .mat-grid-tile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

注意：::ng-deep需配合:host使用，避免污染全局样式。

额外提示 #

• 确保父级mat-grid-list有足够高度，比如设置为占满视口：

mat-grid-list {
  height: 100vh;
}

• 若表单内的mat-form-field仍呈行内排列，可给其添加display: block属性。

内容的提问来源于stack exchange，提问作者AngularNest-beginner